import { DeleteFilled } from "@ant-design/icons";
import { Button, Checkbox, Col, Form, Input, InputNumber, Row, Select, Space, Switch } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
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 = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoTaskPresets);

export function ShopInfoTaskPresets({ bodyshop, form }) {
  const { t } = useTranslation();

  return (
    <>
      <LayoutFormRow noDivider>
        <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>

      <LayoutFormRow header={t("bodyshop.labels.md_tasks_presets")}>
        <Form.List name={["md_tasks_presets", "presets"]}>
          {(fields, { add, remove, move }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key}>
                    <LayoutFormRow noDivider>
                      <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} />
                      </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>
                      <Space wrap>
                        <DeleteFilled
                          onClick={() => {
                            remove(field.name);
                          }}
                        />
                        <FormListMoveArrows move={move} index={index} total={fields.length} />
                      </Space>
                    </LayoutFormRow>
                  </Form.Item>
                ))}
                <Form.Item>
                  <Button
                    type="dashed"
                    onClick={() => {
                      add();
                    }}
                    style={{ width: "100%" }}
                  >
                    {t("bodyshop.actions.add_task_preset")}
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </LayoutFormRow>
    </>
  );
}
