import { DeleteFilled, WarningOutlined } from "@ant-design/icons";
import {
  Button,
  Form,
  Input,
  InputNumber,
  Select,
  Space,
  Switch,
  Table
} from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import CiecaSelect from "../../utils/Ciecaselect";
import BillLineSearchSelect from "../bill-line-search-select/bill-line-search-select.component";
import CurrencyInput from "../form-items-formatted/currency-form-item.component";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function BillEnterModalLinesComponent({
  bodyshop,
  disabled,
  lineData,
  discount,
  form,
  responsibilityCenters,
}) {
  const { t } = useTranslation();
  const { setFieldsValue, getFieldsValue, getFieldValue } = form;

  const columns = (remove) => {
    return [
      {
        title: t("billlines.fields.jobline"),
        dataIndex: "joblineid",
        editable: true,

        formItemProps: (field) => {
          return {
            key: `${field.index}joblinename`,
            name: [field.name, "joblineid"],
            label: t("billlines.fields.jobline"),
            rules: [
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ],
          };
        },
        formInput: (record, index) => (
          <BillLineSearchSelect
            disabled={disabled}
            options={lineData}
            style={{ width: "100%", minWidth: "10rem" }}
            onSelect={(value, opt) => {
              setFieldsValue({
                billlines: getFieldsValue(["billlines"]).billlines.map(
                  (item, idx) => {
                    if (idx === index) {
                      return {
                        ...item,
                        line_desc: opt.line_desc,
                        quantity: opt.part_qty || 1,
                        actual_price: opt.cost,
                        cost_center: opt.part_type
                          ? bodyshop.pbs_serialnumber || bodyshop.cdk_dealerid
                            ? opt.part_type
                            : responsibilityCenters.defaults &&
                              (responsibilityCenters.defaults.costs[
                                opt.part_type
                              ] ||
                                null)
                          : null,
                      };
                    }
                    return item;
                  }
                ),
              });
            }}
          />
        ),
      },
      {
        title: t("billlines.fields.line_desc"),
        dataIndex: "line_desc",
        editable: true,

        formItemProps: (field) => {
          return {
            key: `${field.index}line_desc`,
            name: [field.name, "line_desc"],
            label: t("billlines.fields.line_desc"),
            rules: [
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ],
          };
        },
        formInput: (record, index) => <Input disabled={disabled} />,
      },
      {
        title: t("billlines.fields.quantity"),
        dataIndex: "quantity",
        editable: true,
        width: "4rem",
        formItemProps: (field) => {
          return {
            key: `${field.index}quantity`,
            name: [field.name, "quantity"],
            label: t("billlines.fields.quantity"),
            rules: [
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ],
          };
        },
        formInput: (record, index) => (
          <InputNumber precision={0} min={0} disabled={disabled} />
        ),
      },
      {
        title: t("billlines.fields.actual_price"),
        dataIndex: "actual_price",
        width: "8rem",
        editable: true,
        formItemProps: (field) => {
          return {
            key: `${field.index}actual_price`,
            name: [field.name, "actual_price"],
            label: t("billlines.fields.actual_price"),
            rules: [
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ],
          };
        },
        formInput: (record, index) => (
          <CurrencyInput
            min={0}
            disabled={disabled}
            onBlur={(e) => {
              setFieldsValue({
                billlines: getFieldsValue("billlines").billlines.map(
                  (item, idx) => {
                    if (idx === index) {
                      return {
                        ...item,
                        actual_cost: !!item.actual_cost
                          ? item.actual_cost
                          : Math.round(
                              (parseFloat(e.target.value) * (1 - discount) +
                                Number.EPSILON) *
                                100
                            ) / 100,
                      };
                    }
                    return item;
                  }
                ),
              });
            }}
          />
        ),
      },
      {
        title: t("billlines.fields.actual_cost"),
        dataIndex: "actual_cost",
        editable: true,
        width: "8rem",

        formItemProps: (field) => {
          return {
            key: `${field.index}actual_cost`,
            name: [field.name, "actual_cost"],
            label: t("billlines.fields.actual_cost"),
            rules: [
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ],
          };
        },
        formInput: (record, index) => (
          <CurrencyInput min={0} disabled={disabled} />
        ),
        additional: (record, index) => (
          <Form.Item shouldUpdate>
            {() => {
              const line = getFieldsValue(["billlines"]).billlines[index];
              if (!!!line) return null;
              const lineDiscount = (
                1 -
                Math.round((line.actual_cost / line.actual_price) * 100) / 100
              ).toPrecision(2);

              if (lineDiscount - discount === 0) return <div />;
              return <WarningOutlined style={{ color: "red" }} />;
            }}
          </Form.Item>
        ),
      },
      {
        title: t("billlines.fields.cost_center"),
        dataIndex: "cost_center",
        editable: true,

        formItemProps: (field) => {
          return {
            key: `${field.index}cost_center`,
            name: [field.name, "cost_center"],
            label: t("billlines.fields.cost_center"),
            valuePropName: "value",
            rules: [
              {
                required: true,
                //message: t("general.validation.required"),
              },
            ],
          };
        },
        formInput: (record, index) => (
          <Select showSearch style={{ minWidth: "3rem" }} disabled={disabled}>
            {bodyshop.cdk_dealerid || bodyshop.pbs_serialnumber
              ? CiecaSelect(true, false)
              : responsibilityCenters.costs.map((item) => (
                  <Select.Option key={item.name}>{item.name}</Select.Option>
                ))}
          </Select>
        ),
      },

      {
        title: t("billlines.fields.location"),
        dataIndex: "location",
        editable: true,
        label: t("billlines.fields.location"),
        formItemProps: (field) => {
          return {
            key: `${field.index}location`,
            name: [field.name, "location"],
          };
        },
        formInput: (record, index) => (
          <Select disabled={disabled}>
            {bodyshop.md_parts_locations.map((loc, idx) => (
              <Select.Option key={idx} value={loc}>
                {loc}
              </Select.Option>
            ))}
          </Select>
        ),
      },
      {
        title: t("billlines.labels.deductedfromlbr"),
        dataIndex: "deductedfromlbr",
        editable: true,
        formItemProps: (field) => {
          return {
            valuePropName: "checked",
            key: `${field.index}deductedfromlbr`,
            name: [field.name, "deductedfromlbr"],
          };
        },
        formInput: (record, index) => <Switch disabled={disabled} />,
        additional: (record, index) => (
          <Form.Item shouldUpdate style={{ display: "inline-block" }}>
            {() => {
              if (getFieldValue(["billlines", record.name, "deductedfromlbr"]))
                return (
                  <div>
                    <Form.Item
                      label={t("joblines.fields.mod_lbr_ty")}
                      key={`${index}modlbrty`}
                      rules={[
                        {
                          required: true,
                          //message: t("general.validation.required"),
                        },
                      ]}
                      name={[record.name, "lbr_adjustment", "mod_lbr_ty"]}
                    >
                      <Select allowClear>
                        <Select.Option value="LAA">
                          {t("joblines.fields.lbr_types.LAA")}
                        </Select.Option>
                        <Select.Option value="LAB">
                          {t("joblines.fields.lbr_types.LAB")}
                        </Select.Option>
                        <Select.Option value="LAD">
                          {t("joblines.fields.lbr_types.LAD")}
                        </Select.Option>
                        <Select.Option value="LAE">
                          {t("joblines.fields.lbr_types.LAE")}
                        </Select.Option>
                        <Select.Option value="LAF">
                          {t("joblines.fields.lbr_types.LAF")}
                        </Select.Option>
                        <Select.Option value="LAG">
                          {t("joblines.fields.lbr_types.LAG")}
                        </Select.Option>
                        <Select.Option value="LAM">
                          {t("joblines.fields.lbr_types.LAM")}
                        </Select.Option>
                        <Select.Option value="LAR">
                          {t("joblines.fields.lbr_types.LAR")}
                        </Select.Option>
                        <Select.Option value="LAS">
                          {t("joblines.fields.lbr_types.LAS")}
                        </Select.Option>
                        <Select.Option value="LAU">
                          {t("joblines.fields.lbr_types.LAU")}
                        </Select.Option>
                        <Select.Option value="LA1">
                          {t("joblines.fields.lbr_types.LA1")}
                        </Select.Option>
                        <Select.Option value="LA2">
                          {t("joblines.fields.lbr_types.LA2")}
                        </Select.Option>
                        <Select.Option value="LA3">
                          {t("joblines.fields.lbr_types.LA3")}
                        </Select.Option>
                        <Select.Option value="LA4">
                          {t("joblines.fields.lbr_types.LA4")}
                        </Select.Option>
                      </Select>
                    </Form.Item>
                    <Form.Item
                      label={t("jobs.labels.adjustmentrate")}
                      name={[record.name, "lbr_adjustment", "rate"]}
                      initialValue={bodyshop.default_adjustment_rate}
                      rules={[
                        {
                          required: true,
                          //message: t("general.validation.required"),
                        },
                      ]}
                    >
                      <InputNumber precision={2} min={0.01} />
                    </Form.Item>
                  </div>
                );
              return <></>;
            }}
          </Form.Item>
        ),
      },
      {
        title: t("billlines.fields.federal_tax_applicable"),
        dataIndex: "applicable_taxes.federal",
        editable: true,

        formItemProps: (field) => {
          return {
            key: `${field.index}fedtax`,
            valuePropName: "checked",
            initialValue: true,
            name: [field.name, "applicable_taxes", "federal"],
          };
        },
        formInput: (record, index) => <Switch disabled={disabled} />,
      },
      {
        title: t("billlines.fields.state_tax_applicable"),
        dataIndex: "applicable_taxes.state",
        editable: true,

        formItemProps: (field) => {
          return {
            key: `${field.index}statetax`,
            valuePropName: "checked",
            name: [field.name, "applicable_taxes", "state"],
          };
        },
        formInput: (record, index) => <Switch disabled={disabled} />,
      },
      {
        title: t("billlines.fields.local_tax_applicable"),
        dataIndex: "applicable_taxes.local",
        editable: true,

        formItemProps: (field) => {
          return {
            key: `${field.index}localtax`,
            valuePropName: "checked",
            name: [field.name, "applicable_taxes", "local"],
          };
        },
        formInput: (record, index) => <Switch disabled={disabled} />,
      },
      {
        title: t("general.labels.actions"),

        dataIndex: "actions",
        render: (text, record) => (
          <Button disabled={disabled} onClick={() => remove(record.name)}>
            <DeleteFilled />
          </Button>
        ),
      },
    ];
  };

  const mergedColumns = (remove) =>
    columns(remove).map((col) => {
      if (!col.editable) return col;
      return {
        ...col,
        onCell: (record) => ({
          record,
          formItemProps: col.formItemProps,
          formInput: col.formInput,
          additional: col.additional,
          dataIndex: col.dataIndex,
          title: col.title,
        }),
      };
    });

  return (
    <Form.List name="billlines">
      {(fields, { add, remove, move }) => {
        return (
          <>
            <Table
              components={{
                body: {
                  cell: EditableCell,
                },
              }}
              size="small"
              bordered
              dataSource={fields}
              columns={mergedColumns(remove)}
              scroll={{ x: true }}
              pagination={false}
              rowClassName="editable-row"
            />
            <Form.Item>
              <Button
                disabled={disabled}
                onClick={() => {
                  add();
                }}
                style={{ width: "100%" }}
              >
                {t("billlines.actions.newline")}
              </Button>
            </Form.Item>
          </>
        );
      }}
    </Form.List>
  );
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(BillEnterModalLinesComponent);

const EditableCell = ({
  dataIndex,
  title,
  inputType,
  record,
  index,
  children,
  formInput,
  formItemProps,
  additional,
  ...restProps
}) => {
  if (additional)
    return (
      <td {...restProps}>
        <Space size="small">
          <Form.Item
            name={dataIndex}
            labelCol={{ span: 0 }}
            {...(formItemProps && formItemProps(record))}
          >
            {(formInput && formInput(record, record.name)) || children}
          </Form.Item>
          {additional && additional(record, record.name)}
        </Space>
      </td>
    );

  return (
    <td {...restProps}>
      <Form.Item
        labelCol={{ span: 0 }}
        name={dataIndex}
        {...(formItemProps && formItemProps(record))}
      >
        {(formInput && formInput(record, record.name)) || children}
      </Form.Item>
    </td>
  );
};
