import { useRef, useState, useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { InputField } from '../../../Components/Forms/InputField.jsx';
import { Form } from 'antd';
import { getSession } from '../../../Services/Others';
import {
  getWholeSaleSupplier,
  SupplierPost,
} from '../../../Features/WholeSale/WholesaleData';
import { Messages } from '../../../Components/Notifications/Messages.jsx';
import { DefaultModal } from '../../../Components/Modal/DefaultModal.jsx';

const AddSupplier = (props) => {
  const formRef = useRef(null);
  const dispatch = useDispatch();
  const AppId = getSession('AppId');
  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const UserId = getSession('UserId');
  const UserType = getSession('UserType');
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);
  const validatePhoneNumber = (rule, value, callback) => {
    if (value && value?.length !== 10) {
      callback();
    } else {
      callback();
    }
  };

  const PostSupplier = async () => {
    let Postdata = formRef.current?.getFieldsValue();
    (Postdata['AppId'] = AppId),
      (Postdata['CompId'] = CompId),
      (Postdata['BranchId'] = BranchId),
      (Postdata['CreatedBy'] = UserId);
    let response = await dispatch(SupplierPost(Postdata)).unwrap();
    if (response?.data?.statusCode == 1) {
      setMessageType('success');
      setMessageData(response?.data?.response);
      let data = {
        CompId: CompId,
        BranchId: BranchId,
        AppId: AppId,
      };
      await dispatch(getWholeSaleSupplier(data)).unwrap();
      formRef.current.resetFields();
      props.HandleModalClose();
    } else {
      setMessageType('error');
      setMessageData(response?.data?.response);
    }
  };

  return (
    <div>
      <Messages
        messageType={messageType}
        messageData={messageData}
        onComplete={onComplete}
      />
      <DefaultModal
        open={props.AddsuppOpen}
        title="SUPPLIER"
        handleCancel={props.HandleModalClose}
        footer={false}
        width={500}
        className={'AddSupplierModal'}
        children={
          <div>
            <Form ref={formRef} onFinish={PostSupplier}>
              <Form.Item
                name="SuppName"
                rules={[
                  {
                    required: true,
                    message: 'Please Enter Supplier Name',
                  },
                ]}
              >
                <InputField
                  autoComplete="off"
                  label={<label class="required">Supplier Name</label>}
                  // onChange={(e) => handleReceivedQtyChange(e)}
                />
              </Form.Item>
              <Form.Item
                name="SuppMobile"
                rules={[
                  {
                    pattern: /^\d{10}$/,
                    message: 'Please Enter a Valid Mobile Number',
                  },

                  { validator: validatePhoneNumber },
                ]}
              >
                <InputField
                  autoComplete="off"
                  label="Mobile Number"
                  maxlength="10"
                  // onChange={(e) => handleReceivedQtyChange(e)}
                />
              </Form.Item>

              <button className="inputsof-TGT-btn"> + ADD</button>
            </Form>
          </div>
        }
      ></DefaultModal>
    </div>
  );
};
export default AddSupplier;