import React from "react";
import {
  JDalign,
  JDtypho,
  autoHypen,
  JDcard,
  JDbadge,
  JDColor,
} from "@janda-com/front";
import { ISender } from "../../types/interface";
import moment from "moment";
import { LabelValue } from "../../atom/LabelValue";
import { lang as LANG } from "../../lang/langFn";
import { AuthStatus } from "../../types/api";

interface IProp {
  onDeleteClick: () => void;
  senders: ISender[];
  loading: boolean;
}

export const SenderList: React.FC<IProp> = ({
  senders,
  onDeleteClick,
  loading,
}) => {
  const handleDeleteClicik = () => {
    onDeleteClick();
  };

  if (loading) {
    return (
      <div>
        <div className="senderList--loading"></div>
      </div>
    );
  }

  const align = {
    align: {
      flex: true as true,
    },
  };

  return (
    <div>
      {senders.map((s) => {
        const { name, phoneNumber, createdAt, authInfo } = s;
        const { authDate, status } = authInfo;

        const isDenied = status === AuthStatus.DENIED;
        const isPending = status === AuthStatus.PENDING;
        const isPermitted = status === AuthStatus.PERMITTED;

        let badgeColor: JDColor = "grey4";

        if (isDenied) badgeColor = "error";
        else if (isPending) badgeColor = "grey4";
        else if (isPermitted) badgeColor = "primary";

        return (
          <JDcard mr="no">
            <JDalign>
              <JDalign flex>
                <JDtypho mr="large" size="h6" weight={600}>
                  {autoHypen(phoneNumber)}
                </JDtypho>
                <div>
                  <JDbadge thema={badgeColor}>
                    {LANG("AuthStatus", status)}
                  </JDbadge>
                </div>
              </JDalign>
              <JDalign
                flex={{
                  between: true,
                }}
              >
                <JDalign
                  flex={{
                    wrap: true,
                  }}
                >
                  <LabelValue
                    mr="normal"
                    {...align}
                    label={LANG("senderName")}
                    value={name}
                  />
                  <LabelValue
                    mr="normal"
                    {...align}
                    label={LANG("requestDate")}
                    value={moment(createdAt).format("YYYY-MM-DD HH:SS")}
                  />
                  <LabelValue
                    {...align}
                    label={LANG("authDate")}
                    hide={!authDate}
                    value={moment(authDate).format("YYYY-MM-DD HH:SS")}
                  />
                </JDalign>
                <JDtypho
                  style={{
                    whiteSpace: "nowrap",
                  }}
                  hover
                  onClick={handleDeleteClicik}
                  color="error"
                >
                  {LANG("delete")}
                </JDtypho>
              </JDalign>
            </JDalign>
          </JDcard>
        );
      })}
    </div>
  );
};
