import React, { useEffect, useState } from 'react';
import { Modal, Form, Spin, notification } from 'antd';
import { addDesignation, updateDesignation } from '../service';
import type { ModalBoxProps } from '../interface';
import InputText from '../../../components/form/InputText';
import MasterRoles from '@/components/masterDropdowns/MasterRoles';
import { userNameValidator } from '@/utills/validator';
interface FormValues {
  name: string;
  role_id: number; // Change to the appropriate type based on your data
}
const ModalBox: React.FC<ModalBoxProps> = ({ isModalOpen, handleClose, handleOk, data }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // Determine modal title based on whether data is provided
  const modalTitle = data === null ? 'Add New Designation' : 'Edit Designation';

  // Set form fields based on provided data
  useEffect(() => {
    if (
      data !== null &&
            typeof data === 'object' &&
            'name' in data &&
            'status' in data &&
            'role_name' in data
    ) {
      form.setFieldsValue({
        name: data?.name,
        role_id: data?.role_id,
        status: data?.status,
      });
    } else {
      form.resetFields();
    }
  }, [data, form]);

  // Handle form submission
  const onFinish = (values: FormValues): void => {
    setLoading(true);
    try {
      if (data !== null) {
        updateDesignation(data?.id, {
          name: values?.name,
          status: 'active',
          role_id: values?.role_id,
        })
          .then((response) => {
            const { message } = response?.data || {};
            notification.success({
              message: 'Success',
              description: message,
            });
            form.resetFields();
            handleOk();
          })
          .catch((error) => {
            notification.error({
              message: 'Error',
              description: error?.response?.data?.message,
            });
          });
      } else {
        addDesignation({
          name: values?.name,
          status: 'active',
          role_id: values?.role_id,
        })
          .then((response) => {
            const { message } = response?.data || {};
            notification.success({
              message: 'Success',
              description: message,
            });

            form.resetFields();
            handleOk();
          })
          .catch((error) => {
            notification.error({
              message: 'Error',
              description: error?.response?.data?.message,
            });
          });
      }
    } catch (error) {
      // This catch block will not catch errors from promises
      console.error('Non-promise error:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal
      title={modalTitle}
      open={isModalOpen}
      onOk={() => {
        form.submit();
      }}
      okText={data !== null ? 'Update' : 'Save'}
      onCancel={() => {
        form.resetFields();
        handleClose();
      }}
      confirmLoading={loading}
      className="custom-new-modal">
      <Spin spinning={loading}>
        <Form
          form={form}
          onFinish={onFinish}
          colon={false}
          labelAlign="left"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}>
          <InputText
            name="name"
            label="Name"
            placeholder="Name"
            rules={[{ required: true, validator: userNameValidator('Designation') }]}
          />
          <MasterRoles
            name="role_id"
            label="Role"
            rules={[{ required: true, message: 'Please Select Role' }]}
            onSelect={(value) => {
              form.setFieldsValue({ role_id: value });
            }}
            placeholder="Role"
          />
        </Form>
      </Spin>
    </Modal>
  );
};

export default ModalBox;