import { MRT_ColumnDef } from "material-react-table";
import moment from "moment";
import Link from "next/link";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export const quotesData: MRT_ColumnDef<any>[] = [
  {
    accessorKey: "quote_id",
    header: "Quote#",
    // size: 00,
    muiTableHeadCellProps: {
      sx: {
        color: "#3180F3",
        background: "#E0ECFE",
        width: "100px",
        fontSize: "12px",
      },
    },
    Cell: ({ row }: { row: any }) => {
      if (row?.original?.quote_id) {
        return (
          <Link
            className="link-rate-table table_rateId"
            href={`/rate-quotes/${row?.original?.quote_id}`}
          >
            {row?.original?.quote_id}
          </Link>
        );
      }
    },
  },
  {
    accessorKey: "customer_lead",
    header: "Customer Lead",
    size: 100,
    muiTableHeadCellProps: {
      sx: { color: "#3180F3", background: "#E0ECFE", fontSize: "12px" },
    },
    Cell: ({ row }: { row: any }) => {
      if (row?.original?.customer_lead || row?.original?.business_name) {
        return (
          <p className="link-rate-table type-css">
            {row?.original?.customer_lead}
          </p>
        );
      } else {
        return <p className="link-rate-table type-css">N/A</p>;
      }
    },
  },
  {
    accessorKey: "sales_rep",
    header: "Sales Rep",
    size: 100,
    muiTableHeadCellProps: {
      sx: { color: "#3180F3", background: "#E0ECFE", fontSize: "12px" },
    },
    Cell: ({ row }: { row: any }) => {
      if (row?.original?.sales_rep) {
        return (
          <p className="link-rate-table type-css">{row?.original?.sales_rep}</p>
        );
      } else {
        return <p className="link-rate-table type-css">N/A</p>;
      }
    },
  },
  {
    accessorKey: "request_date",
    header: "Request Date",
    size: 130,
    muiTableHeadCellProps: {
      sx: { color: "#3180F3", background: "#E0ECFE", fontSize: "12px" },
    },
    Filter: ({ column }) => (
      <div className="filter_date">
        <DatePicker
          selected={column.filterValue ? new Date(column.filterValue) : null}
          placeholderText="YYYY-MM-DD"
          className="w-50%"
          dateFormat="yyyy-MM-dd"
          onChange={(date) =>
            column.setFilterValue(date ? moment(date).format("YYYY-MM-DD") : "")
          }
        />
        <button type="button" onClick={() => column.setFilterValue("")}>
          X
        </button>
      </div>
    ),
  },
  {
    accessorKey: "type",
    header: "Type",
    size: 100,
    muiTableHeadCellProps: {
      sx: { color: "#3180F3", background: "#E0ECFE", fontSize: "12px" },
    },
    Cell: ({ row }: { row: any }) => {
      if (row?.original?.type) {
        return (
          <p className="link-rate-table type-css">{row?.original?.type}</p>
        );
      }
    },
  },
  {
    accessorKey: "size",
    header: "Size",
    size: 90,
    muiTableHeadCellProps: {
      sx: { color: "#3180F3", background: "#E0ECFE", fontSize: "12px" },
    },
  },
  {
    accessorKey: "equipment",
    header: "Equipment",
    size: 120,
    muiTableHeadCellProps: {
      sx: { color: "#3180F3", background: "#E0ECFE", fontSize: "12px" },
    },
  },
  {
    accessorKey: "port_name",
    header: "Port/Ramp",
    size: 150,
    muiTableHeadCellProps: {
      sx: { color: "#3180F3", background: "#E0ECFE", fontSize: "12px" },
    },
  },
  {
    accessorKey: "origin_destination",
    header: "Origin/Destination",
    size: 200,
    muiTableHeadCellProps: {
      sx: { color: "#3180F3", background: "#E0ECFE", fontSize: "12px" },
    },
  },
  {
    accessorKey: "dispatcher",
    header: "Dispatcher",
    size: 100,
    muiTableHeadCellProps: {
      sx: { color: "#3180F3", background: "#E0ECFE", fontSize: "12px" },
    },
    Cell: ({ row }: { row: any }) => {
      if (row?.original?.dispatcher) {
        return (
          <p className="link-rate-table type-css">
            {row?.original?.dispatcher}
          </p>
        );
      } else {
        return <p className="link-rate-table type-css">N/A</p>;
      }
    },
  },
  {
    accessorKey: "distance_from_origin_destination",
    header: "Distance From Origin Destination",
    size: 200,
    muiTableHeadCellProps: {
      sx: { color: "#3180F3", background: "#E0ECFE", fontSize: "12px" },
    },
    Cell: ({ row }: { row: any }) => {
      if (row?.original?.distance_from_origin_destination) {
        return (
          <p className="link-rate-table type-css">
            {Number(row?.original?.distance_from_origin_destination).toFixed(2)}
          </p>
        );
      } else {
        return <p className="link-rate-table type-css">N/A</p>;
      }
    },
  },
  {
    accessorKey: "Linehaul",
    header: "Linehaul + FSC Total",
    muiTableHeadCellProps: {
      sx: {
        color: "#3180F3",
        background: "#E0ECFE",
        width: "90px",
        fontSize: "12px",
      },
    },
    Cell: ({ row }: { row: any }) => {
      if (row?.original?.Linehaul === "$400.00") {
        return (
          <p
            className=""
            style={{
              color: "red",
              textAlign: "start",
            }}
          >
            {row?.original?.Linehaul}
          </p>
        );
      }
      if (row?.original?.Linehaul === "$1,210.00") {
        return (
          <p
            className=""
            style={{
              color: "green",
              textAlign: "start",
            }}
          >
            {row?.original?.Linehaul}
          </p>
        );
      }
      if (row?.original?.Linehaul === "$483.00") {
        return (
          <p
            className=""
            style={{
              color: "yellow",
              textAlign: "start",
            }}
          >
            {row?.original?.Linehaul}
          </p>
        );
      }
      if (!row?.original?.Linehaul) {
        return <p className="text-start">N/A</p>;
      }
    },
  },
];