import React, { memo } from 'react';
import { Modal, Form, Input, Select, Row, Col } from 'antd';

const { TextArea } = Input;
const { Option } = Select;

const DetailRole = memo(function DetailRole({ visible, onCancel, onOk, form, editingKey, readOnly }) {
    const getModalTitle = () => {
        if (readOnly) return 'Detail Role';
        if (editingKey) return 'Edit Role';
        return 'Tambah Role';
    };

    return (
        <Modal
            title={getModalTitle()}
            open={visible}
            onCancel={onCancel}
            onOk={onOk}
            okText={readOnly ? 'Tutup' : editingKey ? 'Simpan' : 'Tambah'}
            cancelText="Batal"
            width={600}
            cancelButtonProps={{ style: readOnly ? { display: 'none' } : {} }}
        >
            <Form
                form={form}
                layout="vertical"
                name="roleForm"
                disabled={readOnly}
            >
                <Row gutter={16}>
                    <Col span={24}>
                        <Form.Item
                            name="role_name"
                            label="Nama Role"
                            rules={[
                                {
                                    required: true,
                                    message: 'Nama role tidak boleh kosong!',
                                },
                            ]}
                        >
                            <Input placeholder="Masukkan nama role" />
                        </Form.Item>
                    </Col>
                </Row>

                <Row gutter={16}>
                    <Col span={24}>
                        <Form.Item
                            name="role_level"
                            label="Level"
                            rules={[
                                {
                                    required: true,
                                    message: 'Level tidak boleh kosong!',
                                },
                            ]}
                        >
                            <Select placeholder="Pilih level">
                                <Option value={1}>Level 1</Option>
                                <Option value={2}>Level 2</Option>
                                <Option value={3}>Level 3</Option>
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>

                <Row gutter={16}>
                    <Col span={24}>
                        <Form.Item
                            name="role_description"
                            label="Deskripsi"
                            rules={[
                                {
                                    required: true,
                                    message: 'Deskripsi tidak boleh kosong!',
                                },
                            ]}
                        >
                            <TextArea
                                rows={4}
                                placeholder="Masukkan deskripsi role"
                                maxLength={200}
                                showCount
                            />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Modal>
    );
});

export default DetailRole;
