import React from 'react';
import { Modal, Form, Input, InputNumber, Switch, Row, Col, Typography, Divider } from 'antd';

const { Text } = Typography;

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

    return (
        <Modal
            title={<Text style={{ fontSize: '18px' }}>{modalTitle}</Text>}
            open={visible}
            onCancel={onCancel}
            onOk={onOk}
            okText="Simpan"
            cancelText="Batal"
            okButtonProps={{ disabled: readOnly }}
            destroyOnClose
            
        >
            <Divider />
            <Form form={form} layout="vertical" name="role_form">
                <Form.Item
                    name="is_active"
                    label={<Text strong>Status</Text>}
                    valuePropName="checked"
                    initialValue={true}
                >
                    <Switch disabled={readOnly} />
                </Form.Item>

                <Row gutter={16}>
                    <Col span={12}>
                        <Form.Item
                            name="role_name"
                            label={<Text strong>Nama Role</Text>}
                            rules={[{ required: true, message: 'Nama Role wajib diisi!' }]}
                        >
                            <Input placeholder="Masukan nama role" readOnly={readOnly} />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            name="role_level"
                            label={<Text strong>Level</Text>}
                            rules={[{ required: true, message: 'Level wajib diisi!' }]}
                        >
                            <InputNumber
                                placeholder="Masukan level role"
                                readOnly={readOnly}
                                style={{ width: '100%' }}
                            />
                        </Form.Item>
                    </Col>
                </Row>

                <Form.Item
                    name="role_description"
                    label={<Text strong>Deskripsi Role</Text>}
                >
                    <Input.TextArea
                        rows={4}
                        placeholder="Masukan deskripsi (opsional)"
                        readOnly={readOnly}
                    />
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default DetailRole;