import { Modal, List, Card, Input, Table } from "antd";
import _ from "lodash";
import React, { useState } from "react";
import { InfoCircleFilled } from "@ant-design/icons";
import { FakedGroupsForV3WithMake, SgiGroupsV12026April } from "../../../ipc/ipc-estimate-utils";
import { WhichMPIRulesetToApply } from "../../../util/constants";
import { alphaSort } from "../../../util/sorters";
import { getDecimalPrecision } from "../../../util/decimalPrecision";
import { createStructuredSelector } from "reselect";
import { connect } from "react-redux";
import { selectBodyshop } from "../../../redux/user/user.selectors";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});

const data = [
  {
    group: "Group 1",
    list: [
      {
        make: "ALFA ROMEO",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "AUDI",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "GENESIS*",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "JAGUAR",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "LAND ROVER",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "LINCOLN",
        type: "Truck"
      },
      {
        make: "MERCEDES BENZ",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "MERCEDES BENZ",
        type: "Cargo Van"
      },
      {
        make: "PORSCHE",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "RAM",
        type: "Cargo Van"
      },
      {
        make: "SMART",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "TESLA",
        type: "Car, SUV, or Passenger Van"
      }
    ]
  },
  {
    group: "Group 2",
    list: [
      {
        make: "BMW",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "LEXUS",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "MINI",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "NISSAN",
        type: "Cargo Van"
      },
      {
        make: "SAAB",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "SUBARU",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "VOLVO",
        type: "Car, SUV, or Passenger Van"
      }
    ]
  },
  {
    group: "Group 3",
    list: [
      {
        make: "DODGE",
        type: "Cargo Van"
      },
      {
        make: "FIAT",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "FORD",
        type: "Cargo Van"
      },
      {
        make: "FORD",
        type: "Truck"
      },
      {
        make: "HUMMER",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "HYUNDAI*",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "INFINITI",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "JEEP",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "JEEP",
        type: "Truck"
      },
      {
        make: "KIA",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "LINCOLN",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "MAZDA",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "MAZDA",
        type: "Truck"
      },
      {
        make: "NISSAN",
        type: "Truck"
      },
      {
        make: "SCION",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "TOYOTA",
        type: "Truck"
      },
      {
        make: "VOLKSWAGEN",
        type: "Car, SUV, or Passenger Van"
      }
    ]
  },
  {
    group: "Group 4",
    list: [
      {
        make: "ACURA",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "BUICK",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "CADILLAC",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "CHEVROLET",
        type: "Truck"
      },
      {
        make: "DODGE",
        type: "Truck"
      },
      {
        make: "FORD",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "GMC",
        type: "Truck"
      },
      {
        make: "HONDA",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "HONDA",
        type: "Truck"
      },
      {
        make: "MITSUBISHI",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "NISSAN",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "PLYMOUTH",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "RAM",
        type: "Truck"
      },
      {
        make: "TOYOTA",
        type: "Car, SUV, or Passenger Van"
      }
    ]
  },
  {
    group: "Group 5",
    list: [
      {
        make: "CHEVROLET",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "CHRYSLER",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "DODGE",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "GMC",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "SUZUKI",
        type: "Car, SUV, or Passenger Van"
      }
    ]
  },
  {
    group: "Group 6",
    list: [
      {
        make: "CHEVROLET",
        type: "Cargo Van"
      },
      {
        make: "GMC",
        type: "Cargo Van"
      },
      {
        make: "MERCURY",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "OLDSMOBILE",
        type: "Car, SUV, or Passenger Van"
      },
      {
        make: "PONTIAC",
        type: "Car, SUV, or Passenger Van"
      },

      {
        make: "SATURN",
        type: "Car, SUV, or Passenger Van"
      }
    ]
  }
];

function JobsGroupModalMolecule({ job, bodyshop }) {
  if (bodyshop?.ins_rule_set === "MPI") {
    const MPIRulesetToApply = WhichMPIRulesetToApply(job.close_date);
    return MPIRulesetToApply === "V3" ? <JobsGroupV3ModalMolecule /> : <JobsGroupPreV3ModalMolecule />;
  } else if (bodyshop?.ins_rule_set === "SGI") {
    return <SGIJobsGroupModalMolecule />;
  } else {
    return null;
  }
}

export function JobsGroupPreV3ModalMolecule() {
  const [visible, setVisible] = useState(false);
  const [search, setSearch] = useState("");
  return (
    <div style={{ margin: ".2rem" }}>
      <Modal
        open={visible}
        onCancel={() => setVisible(false)}
        onOk={() => setVisible(false)}
        width="90%"
        title="MPI Group Guidelines"
      >
        <div>
          <Input.Search
            placeholder="Search for Make"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            style={{ marginBottom: ".5rem" }}
          />
          <List
            grid={{ gutter: 8, column: 3 }}
            dataSource={data}
            renderItem={(item) => (
              <List.Item>
                <Card title={item.group}>
                  <table
                    style={{
                      //backgroundColor: "tomato",
                      width: "100%",
                      borderCollapse: "collapse"
                    }}
                  >
                    <thead>
                      <tr>
                        <th width="33%"></th>
                        <th width="67%"></th>
                      </tr>
                    </thead>
                    {item.list.map((item, idx) => (
                      <tr
                        style={{
                          padding: "12px 15px",
                          borderBottom: "1px solid #dddddd",

                          backgroundColor:
                            search && item.make.toLowerCase().includes(search.toLowerCase()) ? "yellow" : ""
                        }}
                        key={idx}
                      >
                        <td>{item.make}</td>
                        <td>{item.type}</td>
                      </tr>
                    ))}
                  </table>
                </Card>
              </List.Item>
            )}
          />
          <div>
            This grouping information is provided for reference only and is not guaranteed to be correct. Please confirm
            with grouping guidelines provided by MPI.
          </div>
        </div>
      </Modal>
      <InfoCircleFilled onClick={() => setVisible(true)} />
    </div>
  );
}

const v3DataSource = _.sortBy(
  FakedGroupsForV3WithMake.filter((f) => (f.name = "V3")),
  "make"
);

export function JobsGroupV3ModalMolecule() {
  const [visible, setVisible] = useState(false);
  const [search, setSearch] = useState("");
  const precision = getDecimalPrecision();
  const v3DataSourceFiltered =
    search === null || search.trim() === ""
      ? v3DataSource
      : v3DataSource.filter((i) => i.make.toLowerCase().includes(search.toLowerCase()));
  return (
    <div style={{ margin: ".2rem" }}>
      <Modal
        open={visible}
        onCancel={() => setVisible(false)}
        onOk={() => setVisible(false)}
        width="90%"
        title="MPI Group Guidelines"
      >
        <div>
          <Input.Search
            placeholder="Search for Make"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            style={{ marginBottom: ".5rem" }}
          />

          <Table
            dataSource={v3DataSourceFiltered}
            pagination={{ pageSize: 20 }}
            columns={[
              {
                title: "Make",
                dataIndex: "make",
                key: "make",
                sorter: (a, b) => alphaSort(a.make - b.make),
                filters: _.uniq(v3DataSource.map((i) => i.make)).map((i) => ({ text: i, value: i })),
                filterSearch: true,
                onFilter: (value, record) => record.make.startsWith(value)
              },
              {
                title: "Type",
                dataIndex: "desc",
                key: "desc"
              },
              {
                title: "Age Group",
                dataIndex: "ageDesc",
                key: "ageDesc"
              },
              {
                title: "Group",
                dataIndex: "group",
                key: "group"
              },
              {
                title: "Target",
                dataIndex: "target",
                key: "target",
                render: (text, record) => `${(record.target * 100).toFixed(precision)}%`
              }
            ]}
          />

          <div>
            If a vehicle make, type and age combination is not listed, it is subject to a default savings target of
            2.3%.
          </div>
          <div>
            This grouping information is provided for reference only and is not guaranteed to be correct. Please confirm
            with grouping guidelines provided by MPI.
          </div>
        </div>
      </Modal>
      <InfoCircleFilled onClick={() => setVisible(true)} />
    </div>
  );
}

export function SGIJobsGroupModalMolecule() {
  const [visible, setVisible] = useState(false);
  const [search, setSearch] = useState("");
  const precision = getDecimalPrecision();
  const v3DataSourceFiltered =
    search === null || search.trim() === ""
      ? SgiGroupsV12026April
      : SgiGroupsV12026April.filter((i) => i.make.toLowerCase().includes(search.toLowerCase()));
  return (
    <div style={{ margin: ".2rem" }}>
      <Modal
        open={visible}
        onCancel={() => setVisible(false)}
        onOk={() => setVisible(false)}
        width="90%"
        title="SGI Guidelines"
      >
        <div>
          <Input.Search
            placeholder="Search for Make"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            style={{ marginBottom: ".5rem" }}
          />

          <Table
            dataSource={v3DataSourceFiltered}
            pagination={{ pageSize: 20 }}
            columns={[
              {
                title: "Make",
                dataIndex: "make",
                key: "make",
                sorter: (a, b) => alphaSort(a.make - b.make),
                filters: _.uniq(SgiGroupsV12026April.map((i) => i.make)).map((i) => ({ text: i, value: i })),
                filterSearch: true,
                onFilter: (value, record) => record.make.startsWith(value)
              },
              {
                title: "Type",
                dataIndex: "desc",
                key: "desc"
              },
              {
                title: "Age Group",
                dataIndex: "ageDesc",
                key: "ageDesc"
              },
              {
                title: "Target",
                dataIndex: "target",
                key: "target",
                render: (text, record) => `${(record.target * 100).toFixed(precision)}%`
              }
            ]}
          />
          <div>
            This grouping information is provided for reference only and is not guaranteed to be correct. Please confirm
            with grouping guidelines provided by SGI.
          </div>
        </div>
      </Modal>
      <InfoCircleFilled onClick={() => setVisible(true)} />
    </div>
  );
}

export default connect(mapStateToProps, null)(JobsGroupModalMolecule);
