import React from 'react';
import { Card, Button, Row, Col, Typography, Space, ConfigProvider } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';

const { Title, Text } = Typography;

const ListStatus = ({
    setActionMode,
    handleEdit,
    handleDelete,
    handlePreview,
    data,
}) => {

    const getCardStyle = (statusName) => {
        let color;
        switch (statusName.toLowerCase()) {
            case 'done':
                color = '#52c41a'; // green
                break;
            case 'warning':
                color = '#faad14'; // orange
                break;
            case 'alarm':
                color = '#f5222d'; // red
                break;
            case 'critical':
                color = '#000000'; // black
                break;
            default:
                color = '#d9d9d9'; // default antd border color
        }
        return { border: `2px solid ${color}` };
    };

    const getTitleStyle = (statusName) => {
        let backgroundColor;
        switch (statusName.toLowerCase()) {
            case 'done':
                backgroundColor = '#52c41a'; // green
                break;
            case 'warning':
                backgroundColor = '#faad14'; // orange
                break;
            case 'alarm':
                backgroundColor = '#f5222d'; // red
                break;
            case 'critical':
                backgroundColor = '#000000'; // black
                break;
            default:
                backgroundColor = 'transparent';
        }
        return {
            backgroundColor,
            color: '#fff',
            padding: '2px 8px',
            borderRadius: '4px',
            display: 'inline-block'
        };
    };

    return (
        <div style={{ padding: 24, minHeight: 360 }}>
            <Row justify="end" style={{ marginBottom: 16 }}>
                <Col>
                    <ConfigProvider
                        theme={{
                            token: { colorBgContainer: '#E9F6EF' },
                            components: {
                                Button: {
                                    defaultBg: 'white',
                                    defaultColor: '#23A55A',
                                    defaultBorderColor: '#23A55A',
                                    defaultHoverColor: '#23A55A',
                                    defaultHoverBorderColor: '#23A55A',
                                },
                            },
                        }}
                    >
                        <Button 
                            icon={<PlusOutlined />} 
                            onClick={() => setActionMode('add')}
                        >
                            Tambah Data
                        </Button>
                    </ConfigProvider>
                </Col>
            </Row>
            <Row gutter={[16, 16]}>
                {data.map(item => (
                    <Col xs={24} sm={12} md={8} lg={6} key={item.key}>
                        <Card
                            title={<span style={getTitleStyle(item.statusName)}>{item.statusName}</span>}
                            style={getCardStyle(item.statusName)}
                            actions={[
                                <Space size="middle" style={{ display: 'flex', justifyContent: 'center' }}>
                                    <Button style={{ border: '1px solid #1890ff', color: '#1890ff', borderRadius: '6px', padding: '4px 8px' }} icon={<EyeOutlined />} onClick={() => handlePreview(item)} />
                                    <Button style={{ border: '1px solid #faad14', color: '#faad14', borderRadius: '6px', padding: '4px 8px' }} icon={<EditOutlined />} onClick={() => handleEdit(item)} />
                                    <Button danger style={{ border: '1px solid red', borderRadius: '6px', padding: '4px 8px' }} icon={<DeleteOutlined />} onClick={() => handleDelete(item)} />
                                </Space>
                            ]}
                        >
                            <p><Text strong>Code:</Text> {item.statusCode}</p>
                            <p><Text strong>Description:</Text> {item.description}</p>
                        </Card>
                    </Col>
                ))}
            </Row>
        </div>
    );
};

export default ListStatus;