import { DeleteFilled } from "@ant-design/icons";
import { Button, Divider, Form, Input, InputNumber, Select, Space, Switch, TimePicker } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import ColorpickerFormItemComponent from "../form-items-formatted/colorpicker-form-item.component";
import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import { ColorPicker } from "./shop-info.rostatus.component";

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

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

  return (
    <div>
      <LayoutFormRow id="shopinfo-scheduling">
        <Form.Item
          label={t("bodyshop.fields.appt_length")}
          name={"appt_length"}
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
        >
          <InputNumber min={15} precision={0} />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.schedule_start_time")}
          name={"schedule_start_time"}
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
          id="schedule_start_time"
        >
          <TimePicker disableSeconds={true} format="HH:mm" />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.schedule_end_time")}
          name={"schedule_end_time"}
          rules={[
            {
              required: true
              //message: t("general.validation.required"),
            }
          ]}
          id="schedule_end_time"
        >
          <TimePicker disableSeconds={true} format="HH:mm" />
        </Form.Item>
        <Form.Item
          name={["appt_alt_transport"]}
          label={t("bodyshop.fields.appt_alt_transport")}
          rules={[
            {
              //message: t("general.validation.required"),
              type: "array"
            }
          ]}
        >
          <Select mode="tags" />
        </Form.Item>
        <Form.Item
          name={["ss_configuration", "dailyhrslimit"]}
          label={t("bodyshop.fields.ss_configuration.dailyhrslimit")}
        >
          <InputNumber min={0} />
        </Form.Item>
        <Form.Item
          name={["ss_configuration", "nobusinessdays"]}
          label={t("bodyshop.fields.ss_configuration.nobusinessdays")}
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
        <Form.Item
          name={["md_lost_sale_reasons"]}
          label={t("bodyshop.fields.md_lost_sale_reasons")}
          rules={[
            {
              // required: true,
              //message: t("general.validation.required"),
              type: "array"
            }
          ]}
        >
          <Select mode="tags" />
        </Form.Item>
      </LayoutFormRow>
      <Divider orientation="left">{t("bodyshop.labels.workingdays")}</Divider>
      <Space wrap size="large" id="workingdays">
        <Form.Item label={t("general.labels.sunday")} name={["workingdays", "sunday"]} valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label={t("general.labels.monday")} name={["workingdays", "monday"]} valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label={t("general.labels.tuesday")} name={["workingdays", "tuesday"]} valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label={t("general.labels.wednesday")} name={["workingdays", "wednesday"]} valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label={t("general.labels.thursday")} name={["workingdays", "thursday"]} valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label={t("general.labels.friday")} name={["workingdays", "friday"]} valuePropName="checked">
          <Switch />
        </Form.Item>
        <Form.Item label={t("general.labels.saturday")} name={["workingdays", "saturday"]} valuePropName="checked">
          <Switch />
        </Form.Item>
      </Space>
      <LayoutFormRow header={t("bodyshop.labels.apptcolors")} id="apptcolors">
        <Form.List name={["appt_colors"]}>
          {(fields, { add, remove, move }) => {
            return (
              <div>
                {fields.map((field, index) => (
                  <Form.Item key={field.key}>
                    <LayoutFormRow noDivider>
                      <Form.Item
                        label={t("bodyshop.fields.appt_colors.label")}
                        key={`${index}aptcolorlabel`}
                        name={[field.name, "label"]}
                        rules={[
                          {
                            required: true
                            //message: t("general.validation.required"),
                          }
                        ]}
                      >
                        <Input />
                      </Form.Item>
                      <Form.Item
                        label={t("bodyshop.fields.appt_colors.color")}
                        key={`${index}aptcolorcolor`}
                        name={[field.name, "color"]}
                        rules={[
                          {
                            required: true
                            //message: t("general.validation.required"),
                          }
                        ]}
                      >
                        <ColorpickerFormItemComponent />
                      </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.addapptcolor")}
                  </Button>
                </Form.Item>
              </div>
            );
          }}
        </Form.List>
      </LayoutFormRow>
      {HasFeatureAccess({ featureName: "smartscheduling", bodyshop }) && (
        <LayoutFormRow header={t("bodyshop.labels.ssbuckets")} id="ssbuckets">
          <Form.List name={["ssbuckets"]}>
            {(fields, { add, remove, move }) => {
              return (
                <div>
                  {fields.map((field, index) => (
                    <Form.Item key={field.key}>
                      <LayoutFormRow noDivider>
                        <Form.Item
                          label={t("bodyshop.fields.ssbuckets.id")}
                          key={`${index}id`}
                          name={[field.name, "id"]}
                          rules={[
                            {
                              required: true
                              //message: t("general.validation.required"),
                            }
                          ]}
                        >
                          <Input />
                        </Form.Item>
                        <Form.Item
                          label={t("bodyshop.fields.ssbuckets.label")}
                          key={`${index}label`}
                          name={[field.name, "label"]}
                          rules={[
                            {
                              required: true
                              //message: t("general.validation.required"),
                            }
                          ]}
                        >
                          <Input />
                        </Form.Item>

                        <Form.Item
                          label={t("bodyshop.fields.ssbuckets.gte")}
                          key={`${index}gte`}
                          name={[field.name, "gte"]}
                          rules={[
                            {
                              required: true
                              //message: t("general.validation.required"),
                            }
                          ]}
                        >
                          <InputNumber />
                        </Form.Item>

                        <Form.Item
                          label={t("bodyshop.fields.ssbuckets.lt")}
                          key={`${index}lt`}
                          name={[field.name, "lt"]}
                        >
                          <InputNumber />
                        </Form.Item>

                        <Form.Item
                          label={t("bodyshop.fields.ssbuckets.target")}
                          key={`${index}target`}
                          name={[field.name, "target"]}
                          rules={[
                            {
                              required: true
                              //message: t("general.validation.required"),
                            }
                          ]}
                        >
                          <InputNumber />
                        </Form.Item>

                        <Space direction="horizontal">
                          <Form.Item
                            label={
                              <Space>
                                {t("bodyshop.fields.ssbuckets.color")}
                                <Button
                                  size="small"
                                  onClick={() => {
                                    form.setFieldValue(["ssbuckets", field.name, "color"]);

                                    form.setFields([
                                      {
                                        name: ["ssbuckets", field.name, "color"],
                                        touched: true
                                      }
                                    ]);
                                  }}
                                >
                                  Reset
                                </Button>
                              </Space>
                            }
                            key={`${index}color`}
                            name={[field.name, "color"]}
                          >
                            <ColorPicker />
                          </Form.Item>
                          <Space wrap>
                            <DeleteFilled
                              onClick={() => {
                                remove(field.name);
                              }}
                            />
                            <FormListMoveArrows move={move} index={index} total={fields.length} />
                          </Space>
                        </Space>
                      </LayoutFormRow>
                    </Form.Item>
                  ))}
                  <Form.Item>
                    <Button
                      type="dashed"
                      onClick={() => {
                        add();
                      }}
                      style={{ width: "100%" }}
                    >
                      {t("bodyshop.actions.addbucket")}
                    </Button>
                  </Form.Item>
                </div>
              );
            }}
          </Form.List>
        </LayoutFormRow>
      )}
    </div>
  );
}

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