import { Button, Flex, Form, Input, InputNumber, Popconfirm, Select, Switch, Typography } from "antd";
import React from "react";
import LayoutFormRow from "../../atoms/layout-form-row/layout-form-row.atom";
import "./shop-settings-form.molecule.styles.scss";

export default function ShopSettingsFormMolecule({ form, saveLoading }) {
  return (
    <div className="shop-settings-form">
      <Flex justify="space-between" align="flex-start" wrap gap="small" className="shop-settings-form__header">
        <div>
          <Typography.Title level={3}>Shop Settings</Typography.Title>
          <Typography.Paragraph type="secondary">
            Update the defaults RPS uses when calculating and syncing shop data.
          </Typography.Paragraph>
        </div>
        <Popconfirm
          title="Changing these settings will require manually restarting RPS on all machines."
          onConfirm={() => form.submit()}
        >
          <Button type="primary" size="small" loading={saveLoading}>
            Save changes
          </Button>
        </Popconfirm>
      </Flex>

      <LayoutFormRow className="shop-settings-form__row" grow>
        <Form.Item
          label="Shop Name"
          name="shopname"
          rules={[
            {
              required: true
            }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="accepted_ins_co"
          label="Accepted Insurance Company Names (must be exactly as in estimating system)"
          rules={[
            {
              required: true,

              type: "array"
            }
          ]}
        >
          <Select mode="tags" style={{ width: "100%" }} />
        </Form.Item>
        <Form.Item name="ins_rule_set" label="Insurance Rule Set">
          <Input disabled />
        </Form.Item>
      </LayoutFormRow>
      <LayoutFormRow className="shop-settings-form__row" grow>
        <Form.Item
          label="Alert when Parts Price Difference Less Than"
          name="ppd_diff_alert"
          rules={[
            {
              required: true
            }
          ]}
        >
          <InputNumber style={{ width: "100%" }} />
        </Form.Item>
        <Form.Item
          label="Calculate using Part Quantity"
          tooltip="MPI guidelines indicate that the quantity for a part should always be 1. However, their calculations do not always reflect this. Set this to true to use the quantity from the part line."
          name="mpi_count_quantity"
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>
      </LayoutFormRow>
    </div>
  );
}
