import { Button, Table, Col , Checkbox} from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { socket } from "../../pages/dms/dms.container";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { alphaSort } from "../../utils/sorters";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DmsCustomerSelector);

export function DmsCustomerSelector({ bodyshop }) {
  const { t } = useTranslation();
  const [customerList, setcustomerList] = useState([]);
  const [visible, setVisible] = useState(false);
  const [selectedCustomer, setSelectedCustomer] = useState(null);

  socket.on("cdk-select-customer", (customerList, callback) => {
    setVisible(true);
    setcustomerList(customerList);
  });

  const onUseSelected = () => {
    setVisible(false);
    socket.emit("cdk-selected-customer", selectedCustomer);
    setSelectedCustomer(null);
  };

  const onUseGeneric = () => {
    setVisible(false);
    socket.emit(
      "cdk-selected-customer",
      bodyshop.cdk_configuration.generic_customer_number
    );
    setSelectedCustomer(null);
  };

  const onCreateNew = () => {
    setVisible(false);
    socket.emit("cdk-selected-customer", null);
    setSelectedCustomer(null);
  };

  const columns = [
    {
      title: t("jobs.fields.dms.id"),
      dataIndex: ["id", "value"],
      key: "id",
    },
    {
      title: t("jobs.fields.dms.vinowner"),
      dataIndex: "vinOwner",
      key: "vinOwner",
      render: (text, record) => <Checkbox disabled checked={record.vinOwner}/>
    },
    {
      title: t("jobs.fields.dms.name1"),
      dataIndex: ["name1", "fullName"],
      key: "name1",
      sorter: (a, b) => alphaSort(a.name1?.fullName, b.name1?.fullName),
    },

    {
      title: t("jobs.fields.dms.address"),
      //dataIndex: ["name2", "fullName"],
      key: "address",
      render: (record, value) =>
        `${record?.address?.addressLine[0]}, ${record.address?.city} ${record.address?.stateOrProvince} ${record.address?.postalCode}`,
    },
  ];

  if (!visible) return <></>;
  return (
    <Col span={24}>
      <Table
        title={() => (
          <div>
            <Button onClick={onUseSelected} disabled={!selectedCustomer}>
              {t("jobs.actions.dms.useselected")}
            </Button>
            <Button
              onClick={onUseGeneric}
              disabled={
                !(
                  bodyshop.cdk_configuration &&
                  bodyshop.cdk_configuration.generic_customer_number
                )
              }
            >
              {t("jobs.actions.dms.usegeneric")}
            </Button>
            <Button onClick={onCreateNew}>
              {t("jobs.actions.dms.createnewcustomer")}
            </Button>
          </div>
        )}
        pagination={{ position: "top" }}
        columns={columns}
        rowKey={(record) => record.id.value}
        dataSource={customerList}
        //onChange={handleTableChange}
        rowSelection={{
          onSelect: (props) => {
            setSelectedCustomer(props.id.value);
          },
          type: "radio",
          selectedRowKeys: [selectedCustomer],
        }}
      />
    </Col>
  );
}