import { Alert, Form, Select, Switch } from "antd";
import { useTranslation } from "react-i18next";
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)(ShopInfoIntellipay);

// noinspection JSUnusedLocalSymbols
export function ShopInfoIntellipay({ bodyshop, form }) {
  const { t } = useTranslation();

  return (
    <>
      <Form.Item dependencies={[["intellipay_config", "enable_cash_discount"]]}>
        {() => {
          const { intellipay_config } = form.getFieldsValue();

          if (intellipay_config?.enable_cash_discount)
            return <Alert message={t("bodyshop.labels.intellipay_cash_discount")} />;
        }}
      </Form.Item>

      <LayoutFormRow noDivider>
        <Form.Item
          label={t("bodyshop.fields.intellipay_config.enable_cash_discount")}
          valuePropName="checked"
          name={["intellipay_config", "enable_cash_discount"]}
        >
          <Switch />
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow header={t("bodyshop.fields.intellipay_config.payment_type")}>
        <Form.Item
          label={t("bodyshop.fields.intellipay_config.payment_map.visa")}
          name={["intellipay_config", "payment_map", "visa"]}
        >
          <Select showSearch>
            {bodyshop.md_payment_types.map((item, idx) => (
              <Select.Option key={idx} value={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.intellipay_config.payment_map.mast")}
          name={["intellipay_config", "payment_map", "mast"]}
        >
          <Select showSearch>
            {bodyshop.md_payment_types.map((item, idx) => (
              <Select.Option key={idx} value={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.intellipay_config.payment_map.amex")}
          name={["intellipay_config", "payment_map", "amex"]}
        >
          <Select showSearch>
            {bodyshop.md_payment_types.map((item, idx) => (
              <Select.Option key={idx} value={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.intellipay_config.payment_map.disc")}
          name={["intellipay_config", "payment_map", "disc"]}
        >
          <Select showSearch>
            {bodyshop.md_payment_types.map((item, idx) => (
              <Select.Option key={idx} value={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.intellipay_config.payment_map.dnrs")}
          name={["intellipay_config", "payment_map", "dnrs"]}
        >
          <Select showSearch>
            {bodyshop.md_payment_types.map((item, idx) => (
              <Select.Option key={idx} value={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.intellipay_config.payment_map.jcb")}
          name={["intellipay_config", "payment_map", "jcb"]}
        >
          <Select showSearch>
            {bodyshop.md_payment_types.map((item, idx) => (
              <Select.Option key={idx} value={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.intellipay_config.payment_map.intr")}
          name={["intellipay_config", "payment_map", "intr"]}
        >
          <Select showSearch>
            {bodyshop.md_payment_types.map((item, idx) => (
              <Select.Option key={idx} value={item}>
                {item}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>
      </LayoutFormRow>
    </>
  );
}