import { Checkbox, Divider, Table } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import PhoneFormatter from "../../utils/PhoneFormatter";

export default function OwnerFindModalComponent({
  selectedOwner,
  setSelectedOwner,
  ownersListLoading,
  ownersList
}) {
  //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"
      //width: "8%",
      // onFilter: (value, record) => record.ro_number.includes(value),
      //   // filteredValue: state.filteredInfo.text || null,
      //   sorter: (a, b) => alphaSort(a, b),
      //   sortOrder:
      //     state.sortedInfo.columnKey === "cieca_id" && state.sortedInfo.order
    },
    {
      title: t("owners.fields.ownr_fn"),
      dataIndex: "ownr_fn",
      key: "ownr_fn"
      //   ellipsis: true,
      //   sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
      //   //width: "25%",
      //   sortOrder:
      //     state.sortedInfo.columnKey === "ownr_name" && state.sortedInfo.order
    },
    {
      title: t("owners.fields.ownr_addr1"),
      dataIndex: "ownr_addr1",
      key: "ownr_addr1"
      //   sorter: (a, b) => alphaSort(a.vehicle_info, b.vehicle_info),
      //   sortOrder:
      //     state.sortedInfo.columnKey === "vehicle_info" && state.sortedInfo.order
      //ellipsis: true
    },
    {
      title: t("owners.fields.ownr_city"),
      dataIndex: "ownr_city",
      key: "ownr_city"
      //   sorter: (a, b) => alphaSort(a.clm_no, b.clm_no),
      //   sortOrder:
      //     state.sortedInfo.columnKey === "clm_no" && state.sortedInfo.order
      //width: "12%",
      //ellipsis: true
    },
    {
      title: t("owners.fields.ownr_ea"),
      dataIndex: "ownr_ea",
      key: "ownr_ea"
      //   sorter: (a, b) => a.clm_amt - b.clm_amt,
      //   sortOrder:
      //     state.sortedInfo.columnKey === "clm_amt" && state.sortedInfo.order
      //width: "12%",
      //ellipsis: true
    },
    {
      title: t("owners.fields.ownr_ph1"),
      dataIndex: "ownr_ph1",
      key: "ownr_ph1",
      render: (text, record) => (
        <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
      )
      //   sorter: (a, b) => alphaSort(a.uploaded_by, b.uploaded_by),
      //   sortOrder:
      //     state.sortedInfo.columnKey === "uploaded_by" && state.sortedInfo.order
      //width: "12%",
      //ellipsis: true
    }
  ];

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

  return (
    <div>
      <Table
        title={() => t("owners.labels.existing_owners")}
        size="small"
        pagination={{ position: "bottom" }}
        columns={columns.map(item => ({ ...item }))}
        rowKey="id"
        loading={ownersListLoading}
        dataSource={ownersList}
        rowSelection={{
          onSelect: props => {
            setSelectedOwner(props.id);
          },
          type: "radio",
          selectedRowKeys: [selectedOwner]
        }}
        onRow={(record, rowIndex) => {
          return {
            onClick: event => {
              handleOnRowClick(record);
            }
          };
        }}
      />
      <Divider />
      <Checkbox
        checked={selectedOwner ? false : true}
        onClick={() => setSelectedOwner(null)}
      >
        
        {t("owners.labels.create_new")}
      </Checkbox>
    </div>
  );
}
