import { Form, Input, InputNumber, Select } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import PhoneFormItem, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";

const timeZonesList = Intl.supportedValuesOf("timeZone");

const mapStateToProps = createStructuredSelector({});

const mapDispatchToProps = () => ({});

export function PartsBusinessInfoComponent() {
  const { t } = useTranslation();

  return (
    <div>
      <LayoutFormRow header={t("bodyshop.labels.businessinformation")} id="businessinformation">
        <Form.Item
          label={t("bodyshop.fields.shopname")}
          name="shopname"
          rules={[
            {
              required: true
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.address1")}
          name="address1"
          rules={[
            {
              required: true
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.address2")} name="address2">
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.city")}
          name="city"
          rules={[
            {
              required: true
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.state")}
          name="state"
          rules={[
            {
              required: true
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.zip_post")} name="zip_post">
          <Input />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.country")} name="country">
          <Input />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.email")} name="email">
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.phone")}
          name="phone"
          rules={[({ getFieldValue }) => PhoneItemFormatterValidation(getFieldValue, "phone")]}
        >
          <PhoneFormItem />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.website")} name="website">
          <Input />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.timezone")}
          rules={[
            {
              required: true
            }
          ]}
          name="timezone"
        >
          <Select
            showSearch
            options={timeZonesList.map((z) => {
              return { label: z, value: z };
            })}
          />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.insurance_vendor_id")} name="insurance_vendor_id">
          <Input />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.logo_img_path")} name={["logo_img_path", "src"]}>
          <Input />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.logo_img_path_height")} name={["logo_img_path", "height"]}>
          <Input />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.logo_img_path_width")} name={["logo_img_path", "width"]}>
          <Input />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.logo_img_header_margin")} name={["logo_img_path", "headerMargin"]}>
          <InputNumber min={0} />
        </Form.Item>
        <Form.Item label={t("bodyshop.fields.logo_img_footer_margin")} name={["logo_img_path", "footerMargin"]}>
          <InputNumber min={0} />
        </Form.Item>
      </LayoutFormRow>
    </div>
  );
}

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