import { DeleteFilled } from "@ant-design/icons";
import { Button, Form, Input, InputNumber, Select, Space, Typography } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
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 LayoutFormRow from "../layout-form-row/layout-form-row.component";

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

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

export function PartsReceiveModalComponent({ bodyshop, form }) {
  const { t } = useTranslation();
  const partsOrderLines = Form.useWatch(["partsorderlines"], form) || [];

  return (
    <div>
      <LayoutFormRow>
        <Form.Item name="location" label={t("parts_orders.labels.allpartsto")}>
          <Select
            style={{ width: "10rem" }}
            onSelect={(value) => {
              form.setFieldsValue({
                partsorderlines: form.getFieldValue("partsorderlines").map((l) => {
                  return { ...l, location: value };
                })
              });
            }}
            options={bodyshop.md_parts_locations.map((loc, idx) => ({
              key: idx,
              value: loc,
              label: loc
            }))}
          />
        </Form.Item>
      </LayoutFormRow>
      <Typography.Title level={4}>{t("parts_orders.labels.inthisorder")}</Typography.Title>
      <Form.List name={["partsorderlines"]}>
        {(fields, { remove, move }) => {
          return (
            <div>
              {fields.map((field, index) => {
                const partsOrderLine = partsOrderLines[field.name] || {};

                return (
                  <Form.Item required={false} key={field.key}>
                    <Form.Item hidden key={`${index}joblineid`} name={[field.name, "joblineid"]}>
                      <Input />
                    </Form.Item>
                    <Form.Item hidden key={`${index}id`} name={[field.name, "id"]}>
                      <Input />
                    </Form.Item>
                    <LayoutFormRow
                      grow
                      title={getFormListItemTitle(
                        t("parts_orders.fields.line_desc"),
                        index,
                        partsOrderLine.line_desc,
                        partsOrderLine.oem_partno
                      )}
                      extra={
                        <Space align="center" size="small">
                          <Button
                            type="text"
                            icon={<DeleteFilled />}
                            onClick={() => {
                              remove(field.name);
                            }}
                          />
                          <FormListMoveArrows
                            move={move}
                            index={index}
                            total={fields.length}
                            orientation="horizontal"
                          />
                        </Space>
                      }
                    >
                      <Form.Item
                        label={t("parts_orders.fields.line_desc")}
                        key={`${index}line_desc`}
                        name={[field.name, "line_desc"]}
                        rules={[
                          {
                            required: true
                            //message: t("general.validation.required"),
                          }
                        ]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("joblines.fields.oem_partno")}
                        key={`${index}oem_partno`}
                        name={[field.name, "oem_partno"]}
                      >
                        <Input disabled />
                      </Form.Item>
                      <Form.Item
                        label={t("joblines.fields.act_price")}
                        key={`${index}act_price`}
                        name={[field.name, "act_price"]}
                      >
                        <Input disabled />
                      </Form.Item>
                      <Form.Item
                        label={t("joblines.fields.location")}
                        key={`${index}location`}
                        name={[field.name, "location"]}
                      >
                        <Select
                          style={{ width: "10rem" }}
                          options={bodyshop.md_parts_locations.map((loc, idx) => ({
                            key: idx,
                            value: loc,
                            label: loc
                          }))}
                        />
                      </Form.Item>
                      <Form.Item
                        label={t("parts_orders.fields.quantity")}
                        key={`${index}quantity`}
                        name={[field.name, "quantity"]}
                      >
                        <InputNumber min={0} />
                      </Form.Item>
                    </LayoutFormRow>
                  </Form.Item>
                );
              })}
            </div>
          );
        }}
      </Form.List>
    </div>
  );
}
