import {AddBtn, EditLink, LoadingData, TableActionGroup, TimingBadge,} from "@/components/common";
import {BasePage, Header} from "@/components/layout";
import {useNotificationsController} from "@/pages/notifications/useNotificationsController";
import {HandleError} from "@/pages/others";
import {notificationTiming} from "@/utils/consts";
import dt from "@/utils/datetime";
import {__, _n, sprintf} from "@wordpress/i18n";
import {Accordion, Col, Form, Row} from "react-bootstrap";

export const Notifications = () => {
  const { data, error, isLoading, search, onChangeSort } =
    useNotificationsController();

  if (error) return <HandleError error={error} />;
  if (isLoading) return <LoadingData />;

  return (
    <BasePage>
      <Header title={__("Notifications", "yoyaku-manager")}>
        <AddBtn to="/add" />
      </Header>
      <Row xs="auto" className="justify-content-end mb-2">
        <Col>
          <Form.Label className="col-form-label">
            {__("Sort", "yoyaku-manager")}
          </Form.Label>
        </Col>
        <Col className="y-sort-wrap ps-0">
          <Form.Select
            label={__("Sort", "yoyaku-manager")}
            value={`${search.orderby}__${search.order}`}
            onChange={(e) => onChangeSort(e.target.value)}
          >
            <option value="timing__asc">
              {__("Timing", "yoyaku-manager")}
            </option>
            <option value="name__asc">
              {__("Name(asc)", "yoyaku-manager")}
            </option>
            <option value="name__desc">
              {__("Name(desc)", "yoyaku-manager")}
            </option>
          </Form.Select>
        </Col>
      </Row>

      <Accordion>
        {data?.items.map((item) => (
          <NotificationItem key={item.id} item={item} />
        ))}
      </Accordion>
    </BasePage>
  );
};

const NotificationItem = ({ item }) => {
  const days_text = item.is_before
    ? sprintf(
        /* translators: %d is replaced with "number" */
        _n("%dDay Before", "%dDays Before.", item.days, "yoyaku-manager"),
        item.days,
      )
    : sprintf(
        /* translators: %d is replaced with "number" */
        _n("%dDay After", "%dDays After.", item.days, "yoyaku-manager"),
        item.days,
      );
  const name =
    item.timing === notificationTiming.scheduled
      ? `${item.name} ${days_text} ${dt.formatTimeRemoveSecond(item.time)}`
      : item.name;

  return (
    <Accordion.Item eventKey={`${item.id}`}>
      <Accordion.Header>
        <TimingBadge timing={item.timing} name={name} />
      </Accordion.Header>
      <Accordion.Body>
        <p>
          <b>{item.subject}</b>
        </p>
        <div style={{ whiteSpace: "pre-line" }}>{item.content}</div>
        <hr />
        <TableActionGroup isVisible>
          <EditLink id={item.id} />
        </TableActionGroup>
      </Accordion.Body>
    </Accordion.Item>
  );
};