import {
  Button,
  Form,
  Input,
  InputNumber,
  Popconfirm,
  Select,
  Typography,
} from "antd";
import React from "react";
import LayoutFormRow from "../../atoms/layout-form-row/layout-form-row.atom";

export default function ShopSettingsFormMolecule({ form, saveLoading }) {
  return (
    <div>
      <Typography.Title>Shop Settings</Typography.Title>
      <Popconfirm
        title="Changing these settings will require manually restarting RPS on all machines."
        onConfirm={() => form.submit()}
      >
        <Button type="primary" loading={saveLoading}>
          Save
        </Button>
      </Popconfirm>

      <LayoutFormRow 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" />
        </Form.Item>

        <Form.Item
          label="Alert when Parts Price Difference Less Than"
          name="ppd_diff_alert"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <InputNumber />
        </Form.Item>
      </LayoutFormRow>
    </div>
  );
}
