import React, { useEffect, useState } from 'react';
import { Modal, Input, Divider, Typography, Button, ConfigProvider, InputNumber, Form } from 'antd';
import { NotifAlert, NotifOk } from '../../../../components/Global/ToastNotif';

const { Text } = Typography;
const { TextArea } = Input;

const DetailStatus = (props) => {
    const [form] = Form.useForm();
    const [confirmLoading, setConfirmLoading] = useState(false);

    const defaultData = {
        key: '',
        statusCode: '',
        statusName: '',
        description: '',
    };

    const [FormData, setFormData] = useState(defaultData);

    const handleCancel = () => {
        props.setSelectedData(null);
        props.setActionMode('list');
        form.resetFields();
    };

    const handleSave = async () => {
        try {
            const values = await form.validateFields();
            setConfirmLoading(true);

            const payload = {
                key: FormData.key,
                ...values,
            };

            props.onDataSaved(payload);
            
            NotifOk({
                icon: 'success',
                title: 'Berhasil',
                message: `Data Status "${payload.statusName}" berhasil ${
                    payload.key ? 'diubah' : 'ditambahkan'
                }.`,
            });

            setConfirmLoading(false);
            props.setActionMode('list');
            form.resetFields();
        } catch (errorInfo) {
            console.log('Failed:', errorInfo);
        }
    };

    useEffect(() => {
        if (props.selectedData) {
            setFormData(props.selectedData);
            form.setFieldsValue(props.selectedData);
        } else {
            setFormData(defaultData);
            form.resetFields();
        }
    }, [props.showModal, props.selectedData, form]);

    return (
        <Modal
            title={
                <Text style={{ fontSize: '18px' }}>
                    {props.actionMode === 'add'
                        ? 'Tambah Data'
                        : props.actionMode === 'preview'
                        ? 'Preview Status'
                        : 'Edit Status'}
                </Text>
            }
            open={props.showModal}
            onCancel={handleCancel}
            footer={
                !props.readOnly && (
                    <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', paddingTop: '15px' }}>
                        <ConfigProvider
                            theme={{
                                token: { colorPrimary: '#23A55A' },
                                components: {
                                    Button: {
                                        defaultBg: 'white',
                                        defaultColor: '#23A55A',
                                        defaultBorderColor: '#23A55A',
                                        defaultHoverColor: 'white',
                                        defaultHoverBg: '#23A55A',
                                        defaultHoverBorderColor: '#23A55A',
                                    },
                                },
                            }}
                        >
                            <Button onClick={handleCancel}>Batal</Button>
                        </ConfigProvider>
                        <ConfigProvider
                            theme={{
                                token: { colorPrimary: '#23A55A' },
                                components: {
                                    Button: {
                                        defaultBg: '#23A55A',
                                        defaultColor: 'white',
                                        defaultBorderColor: '#23A55A',
                                        defaultHoverColor: 'white',
                                        defaultHoverBg: '#23A55A',
                                        defaultHoverBorderColor: '#23A55A',
                                    },
                                },
                            }}
                        >
                            <Button type="primary" loading={confirmLoading} onClick={handleSave}>
                                Simpan
                            </Button>
                        </ConfigProvider>
                    </div>
                )
            }
        >
            <Divider />
            <Form form={form} layout="vertical" name="detailStatusForm">
                <Form.Item
                    name="statusCode"
                    label={<Text strong>Status Code</Text>}
                    rules={[{ required: true, message: 'Silakan masukkan kode status!' }]}
                >
                    <InputNumber
                        placeholder="Masukan code status"
                        readOnly={props.readOnly}
                        style={{ width: '100%' }}
                    />
                </Form.Item>
                <Form.Item
                    name="statusName"
                    label={<Text strong>Status Name</Text>}
                    rules={[{ required: true, message: 'Silakan masukkan nama status!' }]}
                >
                    <Input
                        placeholder="Masukan nama status"
                        readOnly={props.readOnly}
                    />
                </Form.Item>
                <Form.Item
                    name="description"
                    label={<Text strong>Description</Text>}
                    rules={[{ required: true, message: 'Silakan masukkan deskripsi!' }]}
                >
                    <TextArea
                        placeholder="Masukan deskripsi"
                        readOnly={props.readOnly}
                        rows={4}
                    />
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default DetailStatus;