import { Checkbox, Divider } from "antd";
import { useTranslation } from "react-i18next";
import PhoneFormatter from "../../utils/PhoneFormatter";
import ResponsiveTable from "../responsive-table/responsive-table.component";

export default function OwnerFindModalComponent({
  selectedOwner,
  setSelectedOwner,
  ownersListLoading,
  ownersList,
  partsQueueToggle,
  setPartsQueueToggle
}) {
  //setSelectedOwner is used to set the record id of the owner to use for adding the job.
  const { t } = useTranslation();
  const columns = [
    {
      title: t("owners.fields.ownr_ln"),
      dataIndex: "ownr_ln",
      key: "ownr_ln"
    },
    {
      title: t("owners.fields.ownr_fn"),
      dataIndex: "ownr_fn",
      key: "ownr_fn"
    },
    {
      title: t("owners.fields.ownr_co_nm"),
      dataIndex: "ownr_co_nm",
      key: "ownr_co_nm"
    },
    {
      title: t("owners.fields.ownr_addr1"),
      dataIndex: "ownr_addr1",
      key: "ownr_addr1"
    },
    {
      title: t("owners.fields.ownr_city"),
      dataIndex: "ownr_city",
      key: "ownr_city"
    },
    {
      title: t("owners.fields.ownr_ea"),
      dataIndex: "ownr_ea",
      key: "ownr_ea"
    },
    {
      title: t("owners.fields.ownr_ph1"),
      dataIndex: "ownr_ph1",
      key: "ownr_ph1",
      render: (text, record) => <PhoneFormatter type={record.ownr_ph1_ty}>{record.ownr_ph1}</PhoneFormatter>
    },
    {
      title: t("owners.fields.ownr_ph2"),
      dataIndex: "ownr_ph2",
      key: "ownr_ph2",
      render: (text, record) => <PhoneFormatter type={record.ownr_ph2_ty}>{record.ownr_ph2}</PhoneFormatter>
    },
    {
      title: t("owners.fields.note"),
      dataIndex: "note",
      key: "note",
      render: (text, record) => <span style={{ whiteSpace: "pre" }}>{record.note}</span>
    }
  ];

  const handleOnRowClick = (record) => {
    if (record) {
      if (record.id) {
        setSelectedOwner(record.id);
        return;
      }
    }
    setSelectedOwner(null);
  };

  return (
    <div>
      <ResponsiveTable
        pagination={{ placement: "bottom" }}
        columns={columns}
        mobileColumnKeys={["ownr_ln", "ownr_fn", "ownr_ph1", "ownr_ph2"]}
        rowKey="id"
        loading={ownersListLoading}
        dataSource={ownersList}
        rowSelection={{
          onSelect: (props) => {
            setSelectedOwner(props.id);
          },
          type: "radio",
          selectedRowKeys: [selectedOwner]
        }}
        onRow={(record) => {
          return {
            onClick: () => {
              handleOnRowClick(record);
            }
          };
        }}
      />
      <Divider />
      <Checkbox checked={!selectedOwner} onClick={() => setSelectedOwner(null)}>
        {t("owners.labels.create_new")}
      </Checkbox>
      <Checkbox checked={partsQueueToggle} onChange={(e) => setPartsQueueToggle(e.target.checked)}>
        {t("bodyshop.fields.md_functionality_toggles.parts_queue_toggle")}
      </Checkbox>
    </div>
  );
}
