import React from 'react';
import { Modal, Form, Input, ConfigProvider, Button, Typography } from 'antd';

const { Text } = Typography;

const DetailPlantSection = ({ visible, onCancel, onOk, form, editingKey, readOnly }) => {
    const modalTitle = readOnly ? 'Preview Plant Section' : (editingKey ? 'Edit Plant Section' : 'Tambah Plant Section');

    return (
        <Modal
            title={modalTitle}
            visible={visible}
            onCancel={onCancel}
            footer={[
                <React.Fragment key="modal-footer">
                    <ConfigProvider
                        theme={{
                            token: { colorBgContainer: '#E9F6EF' },
                            components: {
                                Button: {
                                    defaultBg: 'white',
                                    defaultColor: '#23A55A',
                                    defaultBorderColor: '#23A55A',
                                    defaultHoverColor: '#23A55A',
                                    defaultHoverBorderColor: '#23A55A',
                                },
                            },
                        }}
                    >
                        <Button onClick={onCancel}>Batal</Button>
                    </ConfigProvider>
                    <ConfigProvider
                        theme={{
                            token: {
                                colorBgContainer: '#209652',
                            },
                            components: {
                                Button: {
                                    defaultBg: '#23a55a',
                                    defaultColor: '#FFFFFF',
                                    defaultBorderColor: '#23a55a',
                                    defaultHoverColor: '#FFFFFF',
                                    defaultHoverBorderColor: '#23a55a',
                                },
                            },
                        }}
                    >
                        {!readOnly && (
                            <Button onClick={onOk}>
                                Simpan
                            </Button>
                        )}
                    </ConfigProvider>
                </React.Fragment>,
            ]}
            destroyOnClose
        >
            <Form form={form} layout="vertical" name="form_in_modal">
                <div style={{ marginBottom: 12 }}>
                    <Text strong>Kode Plant</Text>
                    <Text style={{ color: 'red' }}> *</Text>
                    <Form.Item
                        name="kode_plant"
                        rules={[{ required: true, message: 'Silakan masukkan kode plant!' }]}
                        style={{ marginBottom: 0 }}
                    >
                        <Input readOnly={readOnly} placeholder="Masukkan Kode Plant" />
                    </Form.Item>
                </div>
                <div style={{ marginBottom: 12 }}>
                    <Text strong>Nama Plant</Text>
                    <Text style={{ color: 'red' }}> *</Text>
                    <Form.Item
                        name="nama_plant"
                        rules={[{ required: true, message: 'Silakan masukkan nama plant!' }]}
                        style={{ marginBottom: 0 }}
                    >
                        <Input readOnly={readOnly} placeholder="Masukkan Nama Plant" />
                    </Form.Item>
                </div>
                <div style={{ marginBottom: 12 }}>
                    <Text strong>Lokasi Plant</Text>
                    <Text style={{ color: 'red' }}> *</Text>
                    <Form.Item
                        name="lokasi_plant"
                        rules={[{ required: true, message: 'Silakan masukkan lokasi plant!' }]}
                        style={{ marginBottom: 0 }}
                    >
                        <Input readOnly={readOnly} placeholder="Masukkan Lokasi Plant" />
                    </Form.Item>
                </div>
                <div style={{ marginBottom: 12 }}>
                    <Text strong>Deskripsi</Text>
                    <Form.Item
                        name="deskripsi"
                        style={{ marginBottom: 0 }}
                    >
                        <Input.TextArea readOnly={readOnly} placeholder="Masukkan Deskripsi (Opsional)" rows={4} />
                    </Form.Item>
                </div>
            </Form>
        </Modal>
    );
};

export default DetailPlantSection;