import { DeleteFilled } from "@ant-design/icons";
import { Button, Checkbox, Col, Form, Input, InputNumber, Row, Select, Space, Switch } from "antd";
import { useTranslation } from "react-i18next";
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
import { getFormListItemTitle } from "../form-list-move-arrows/form-list-item-title.utils";
import ConfigListEmptyState from "../layout-form-row/config-list-empty-state.component.jsx";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";

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

const normalizePercent = (value) => Math.round((Number(value || 0) + Number.EPSILON) * 10000) / 10000;

const getTaskPresetAllocationErrors = (presets = [], t) => {
  const totalsByLaborType = {};

  presets.forEach((preset) => {
    const percent = normalizePercent(preset?.percent);

    if (!percent) {
      return;
    }

    const laborTypes = Array.isArray(preset?.hourstype) ? preset.hourstype : [];

    laborTypes.forEach((laborType) => {
      if (!laborType) {
        return;
      }

      totalsByLaborType[laborType] = normalizePercent((totalsByLaborType[laborType] || 0) + percent);
    });
  });

  return Object.entries(totalsByLaborType)
    .filter(([, total]) => total > 100)
    .map(([laborType, total]) => {
      const translatedLaborType = t(`joblines.fields.lbr_types.${laborType}`);
      const laborTypeLabel =
        translatedLaborType === `joblines.fields.lbr_types.${laborType}` ? laborType : translatedLaborType;

      return t("bodyshop.errors.task_preset_allocation_exceeded", {
        laborType: laborTypeLabel,
        total
      });
    });
};

export function ShopInfoTaskPresets({ bodyshop }) {
  const { t } = useTranslation();
  const form = Form.useFormInstance();
  const taskPresets = Form.useWatch(["md_tasks_presets", "presets"], form) || [];

  return (
    <>
      <LayoutFormRow header={t("bodyshop.labels.task_preset_options")}>
        <Form.Item
          label={t("bodyshop.fields.md_tasks_presets.enable_tasks")}
          valuePropName="checked"
          name={["md_tasks_presets", "enable_tasks"]}
        >
          <Switch />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.md_tasks_presets.use_approvals")}
          valuePropName="checked"
          name={["md_tasks_presets", "use_approvals"]}
        >
          <Switch />
        </Form.Item>
      </LayoutFormRow>

      <Form.List
        name={["md_tasks_presets", "presets"]}
        rules={[
          {
            validator: async (_, presets) => {
              const allocationErrors = getTaskPresetAllocationErrors(presets, t);

              if (allocationErrors.length > 0) {
                throw new Error(allocationErrors.join(" "));
              }
            }
          }
        ]}
      >
        {(fields, { add, remove, move }, { errors }) => {
          return (
            <LayoutFormRow
              header={t("bodyshop.labels.md_tasks_presets")}
              actions={[
                <Button
                  key="add-task-preset"
                  type="primary"
                  block
                  onClick={() => {
                    add();
                  }}
                >
                  {t("bodyshop.actions.add_task_preset")}
                </Button>
              ]}
            >
              <div>
                {fields.length === 0 ? (
                  <ConfigListEmptyState actionLabel={t("bodyshop.actions.add_task_preset")} />
                ) : (
                  fields.map((field, index) => {
                    const taskPreset = taskPresets[field.name] || {};

                    return (
                      <Form.Item key={field.key}>
                        <LayoutFormRow
                          noDivider
                          title={getFormListItemTitle(
                            t("bodyshop.fields.md_tasks_presets.name"),
                            index,
                            taskPreset.name,
                            taskPreset.memo
                          )}
                          extra={
                            <Space align="center" size="small">
                              <Button
                                type="text"
                                danger
                                icon={<DeleteFilled />}
                                onClick={() => {
                                  remove(field.name);
                                }}
                              />
                              <FormListMoveArrows
                                move={move}
                                index={index}
                                total={fields.length}
                                orientation="horizontal"
                              />
                            </Space>
                          }
                        >
                          <Form.Item
                            label={t("bodyshop.fields.md_tasks_presets.name")}
                            key={`${index}name`}
                            name={[field.name, "name"]}
                            rules={[
                              {
                                required: true
                                //message: t("general.validation.required"),
                              }
                            ]}
                          >
                            <Input />
                          </Form.Item>
                          <Form.Item
                            span={12}
                            label={t("bodyshop.fields.md_tasks_presets.hourstype")}
                            key={`${index}hourstype`}
                            name={[field.name, "hourstype"]}
                            rules={[
                              {
                                required: true
                                //message: t("general.validation.required"),
                              }
                            ]}
                          >
                            <Checkbox.Group>
                              <Row>
                                <Col span={4}>
                                  <Checkbox value="LAA" style={{ lineHeight: "32px" }}>
                                    {t("joblines.fields.lbr_types.LAA")}
                                  </Checkbox>
                                </Col>
                                <Col span={4}>
                                  <Checkbox value="LAB" style={{ lineHeight: "32px" }}>
                                    {t("joblines.fields.lbr_types.LAB")}
                                  </Checkbox>
                                </Col>
                                <Col span={4}>
                                  <Checkbox value="LAD" style={{ lineHeight: "32px" }}>
                                    {t("joblines.fields.lbr_types.LAD")}
                                  </Checkbox>
                                </Col>
                                <Col span={4}>
                                  <Checkbox value="LAE" style={{ lineHeight: "32px" }}>
                                    {t("joblines.fields.lbr_types.LAE")}
                                  </Checkbox>
                                </Col>
                                <Col span={4}>
                                  <Checkbox value="LAF" style={{ lineHeight: "32px" }}>
                                    {t("joblines.fields.lbr_types.LAF")}
                                  </Checkbox>
                                </Col>
                                <Col span={4}>
                                  <Checkbox value="LAG" style={{ lineHeight: "32px" }}>
                                    {t("joblines.fields.lbr_types.LAG")}
                                  </Checkbox>
                                </Col>
                                <Col span={4}>
                                  <Checkbox value="LAM" style={{ lineHeight: "32px" }}>
                                    {t("joblines.fields.lbr_types.LAM")}
                                  </Checkbox>
                                </Col>
                                <Col span={4}>
                                  <Checkbox value="LAR" style={{ lineHeight: "32px" }}>
                                    {t("joblines.fields.lbr_types.LAR")}
                                  </Checkbox>
                                </Col>
                                <Col span={4}>
                                  <Checkbox value="LAS" style={{ lineHeight: "32px" }}>
                                    {t("joblines.fields.lbr_types.LAS")}
                                  </Checkbox>
                                </Col>
                                <Col span={4}>
                                  <Checkbox value="LAU" style={{ lineHeight: "32px" }}>
                                    {t("joblines.fields.lbr_types.LAU")}
                                  </Checkbox>
                                </Col>
                                <Col span={4}>
                                  <Checkbox value="LA1" style={{ lineHeight: "32px" }}>
                                    {t("joblines.fields.lbr_types.LA1")}
                                  </Checkbox>
                                </Col>
                                <Col span={4}>
                                  <Checkbox value="LA2" style={{ lineHeight: "32px" }}>
                                    {t("joblines.fields.lbr_types.LA2")}
                                  </Checkbox>
                                </Col>
                                <Col span={4}>
                                  <Checkbox value="LA3" style={{ lineHeight: "32px" }}>
                                    {t("joblines.fields.lbr_types.LA3")}
                                  </Checkbox>
                                </Col>
                                <Col span={4}>
                                  <Checkbox value="LA4" style={{ lineHeight: "32px" }}>
                                    {t("joblines.fields.lbr_types.LA4")}
                                  </Checkbox>
                                </Col>
                              </Row>
                            </Checkbox.Group>
                          </Form.Item>
                          <Form.Item
                            label={t("bodyshop.fields.md_tasks_presets.percent")}
                            key={`${index}percent`}
                            rules={[
                              {
                                required: true
                                //message: t("general.validation.required"),
                              }
                            ]}
                            name={[field.name, "percent"]}
                          >
                            <InputNumber min={0} max={100} suffix="%" />
                          </Form.Item>
                          <Form.Item
                            label={t("bodyshop.fields.md_tasks_presets.memo")}
                            key={`${index}memo`}
                            name={[field.name, "memo"]}
                          >
                            <Input />
                          </Form.Item>
                          <Form.Item
                            label={t("bodyshop.fields.md_tasks_presets.nextstatus")}
                            key={`${index}nextstatus`}
                            name={[field.name, "nextstatus"]}
                          >
                            <Select
                              options={bodyshop.md_ro_statuses.production_statuses.map((o) => ({
                                value: o,
                                label: o
                              }))}
                            />
                          </Form.Item>
                        </LayoutFormRow>
                      </Form.Item>
                    );
                  })
                )}
                <Form.ErrorList errors={errors} />
              </div>
            </LayoutFormRow>
          );
        }}
      </Form.List>
    </>
  );
}
