import { Card, Col, Form, Radio, Row } from "antd";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../../redux/user/user.selectors";
import { HasFeatureAccess } from "../../feature-wrapper/feature-wrapper.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});

const LayoutSettings = ({ t, bodyshop }) => (
  <Card title={t("production.settings.layout")} style={{ maxWidth: "100%", overflowX: "auto" }}>
    <Row gutter={[16, 16]}>
      {[
        {
          name: "orientation",
          label: t("production.labels.orientation"),
          options: [
            { value: true, label: t("production.labels.vertical") },
            { value: false, label: t("production.labels.horizontal") }
          ]
        },
        {
          name: "cardSize",
          label: t("production.labels.card_size"),
          options: [
            { value: "small", label: t("production.options.small") },
            { value: "medium", label: t("production.options.medium") },
            { value: "large", label: t("production.options.large") }
          ]
        },
        {
          name: "compact",
          label: t("production.labels.compact"),
          options: [
            { value: true, label: t("production.labels.tall") },
            { value: false, label: t("production.labels.wide") }
          ]
        },
        ...(HasFeatureAccess({ bodyshop, featureName: "smartscheduling" })
          ? [
              {
                name: "cardcolor",
                label: t("production.labels.cardcolor"),
                options: [
                  { value: true, label: t("production.labels.on") },
                  { value: false, label: t("production.labels.off") }
                ]
              }
            ]
          : []),
        {
          name: "kiosk",
          label: t("production.labels.kiosk_mode"),
          options: [
            { value: true, label: t("production.labels.on") },
            { value: false, label: t("production.labels.off") }
          ]
        }
      ].map(({ name, label, options }) => (
        <Col xs={24} sm={16} md={10} lg={8} key={name}>
          <Form.Item name={name} label={label}>
            <Radio.Group style={{ display: "flex", flexWrap: "nowrap" }}>
              {options.map((option) => (
                <Radio.Button key={option.value.toString()} value={option.value}>
                  {option.label}
                </Radio.Button>
              ))}
            </Radio.Group>
          </Form.Item>
        </Col>
      ))}
    </Row>
  </Card>
);

LayoutSettings.propTypes = {
  t: PropTypes.func.isRequired
};

export default connect(mapStateToProps)(LayoutSettings);
