import { Alert, Form, InputNumber, Switch } from "antd";
import React from "react";
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 = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(ShopInfoIntellipay);

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>
        <Form.Item
          label={t("bodyshop.fields.intellipay_config.cash_discount_percentage")}
          dependencies={[["intellipay_config", "enable_cash_discount"]]}
          name={["intellipay_config", "cash_discount_percentage"]}
          rules={[
            ({ getFieldsValue }) => ({ required: form.getFieldValue(["intellipay_config", "enable_cash_discount"]) })
          ]}
        >
          <InputNumber min={0} max={100} precision={1} suffix="%" />
        </Form.Item>
      </LayoutFormRow>
    </>
  );
}