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";
import InstanceRenderManager from "../../utils/instanceRenderMgr";

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();
  const cashDiscountEnabled = Form.useWatch(["intellipay_config", "enable_cash_discount"], form);

  return (
    <>
      {cashDiscountEnabled && (
        <div style={{ marginBottom: 12 }}>
          <Alert title={t("bodyshop.labels.intellipay_cash_discount")} />
        </div>
      )}

      <LayoutFormRow
        header={InstanceRenderManager({
          rome: t("bodyshop.labels.romepay"),
          imex: t("bodyshop.labels.imexpay")
        })}
      >
        <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 options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.intellipay_config.payment_map.mast")}
          name={["intellipay_config", "payment_map", "mast"]}
        >
          <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.intellipay_config.payment_map.amex")}
          name={["intellipay_config", "payment_map", "amex"]}
        >
          <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.intellipay_config.payment_map.disc")}
          name={["intellipay_config", "payment_map", "disc"]}
        >
          <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.intellipay_config.payment_map.dnrs")}
          name={["intellipay_config", "payment_map", "dnrs"]}
        >
          <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.intellipay_config.payment_map.jcb")}
          name={["intellipay_config", "payment_map", "jcb"]}
        >
          <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
        </Form.Item>
        <Form.Item
          label={t("bodyshop.fields.intellipay_config.payment_map.intr")}
          name={["intellipay_config", "payment_map", "intr"]}
        >
          <Select showSearch options={bodyshop.md_payment_types.map((item) => ({ value: item, label: item }))} />
        </Form.Item>
      </LayoutFormRow>
    </>
  );
}
