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

const { Text } = Typography;

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

    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 Brand</Text>
                    <Text style={{ color: 'red' }}> *</Text>
                    <Form.Item
                        name="brandCode"
                        rules={[{ required: true, message: 'Please input the brand code!' }]}
                        style={{ marginBottom: 0 }}
                    >
                        <Input readOnly={readOnly} placeholder="Enter Brand Code" />
                    </Form.Item>
                </div>
                <div style={{ marginBottom: 12 }}>
                    <Text strong>Brand Name</Text>
                    <Text style={{ color: 'red' }}> *</Text>
                    <Form.Item
                        name="brandName"
                        rules={[{ required: true, message: 'Please input the brand name!' }]}
                        style={{ marginBottom: 0 }}
                    >
                        <Input readOnly={readOnly} placeholder="Enter Brand Name" />
                    </Form.Item>
                </div>
                <div style={{ marginBottom: 12 }}>
                    <Text strong>Brand Type</Text>
                    <Text style={{ color: 'red' }}> *</Text>
                    <Form.Item
                        name="brandType"
                        rules={[{ required: true, message: 'Please input the brand type!' }]}
                        style={{ marginBottom: 0 }}
                    >
                        <Input readOnly={readOnly} placeholder="Enter Brand Type" />
                    </Form.Item>
                </div>
                <div style={{ marginBottom: 12 }}>
                    <Text strong>Device Name</Text>
                    <Text style={{ color: 'red' }}> *</Text>
                    <Form.Item
                        name="deviceName"
                        rules={[{ required: true, message: 'Please input the device name!' }]}
                        style={{ marginBottom: 0 }}
                    >
                        <Input readOnly={readOnly} placeholder="Enter Device Name" />
                    </Form.Item>
                </div>
                <div style={{ marginBottom: 12 }}>
                    <Text strong>Description</Text>
                    <Form.Item
                        name="description"
                        style={{ marginBottom: 0 }}
                    >
                        <Input.TextArea readOnly={readOnly} placeholder="Enter Description (Optional)" rows={4} />
                    </Form.Item>
                </div>
            </Form>
        </Modal>
    );
};

export default DetailBrandDevice;