import React, { useState } from 'react';
import { Button, Col, Row, Space, Input, ConfigProvider, Card } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, EyeOutlined } from '@ant-design/icons';
import TableList from '../../../../components/Global/TableList';

const ListPlantSection = ({ 
    setActionMode, 
    handleEdit, 
    handleDelete,
    handlePreview,
    getAllPlantSection
}) => {
    const [searchValue, setSearchValue] = useState('');
    const [formDataFilter, setFormDataFilter] = useState({ search: '' });
    const [trigerFilter, setTrigerFilter] = useState(false);

    const columns = [
        {
            title: 'No',
            dataIndex: 'key',
            key: 'key',
            width: '5%',
            render: (text, record, index) => index + 1,
        },
        {
            title: 'Kode Plant',
            dataIndex: 'kode_plant',
            key: 'kode_plant',
        },
        {
            title: 'Nama Plant',
            dataIndex: 'nama_plant',
            key: 'nama_plant',
        },
        {
            title: 'Lokasi Plant',
            dataIndex: 'lokasi_plant',
            key: 'lokasi_plant',
        },
        {
            title: 'Deskripsi',
            dataIndex: 'deskripsi',
            key: 'deskripsi',
        },
        {
            title: 'Aksi',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button type="text" style={{ borderColor: '#1890ff' }} icon={<EyeOutlined style={{ color: '#1890ff' }} />} onClick={() => handlePreview(record)} />
                    <Button type="text" style={{ borderColor: '#faad14' }} icon={<EditOutlined style={{ color: '#faad14' }} />} onClick={() => handleEdit(record)} />
                    <Button type="text" danger style={{ borderColor: 'red' }} icon={<DeleteOutlined />} onClick={() => handleDelete(record)} />
                </Space>
            ),
        },
    ];

    const handleSearch = () => {
        setFormDataFilter({ search: searchValue });
        setTrigerFilter((prev) => !prev);
    };

    const handleSearchClear = () => {
        setSearchValue('');
        setFormDataFilter({ search: '' });
        setTrigerFilter((prev) => !prev);
    };

    return (
        <Card>
            <Row justify="space-between" align="middle" gutter={[8, 8]}>
                <Col xs={24} sm={24} md={12} lg={12}>
                    <Input.Search
                        placeholder="Cari berdasarkan kode, nama, atau lokasi..."
                        value={searchValue}
                        onChange={(e) => {
                            const value = e.target.value;
                            setSearchValue(value);
                            if (value === '') {
                                handleSearchClear();
                            }
                        }}
                        onSearch={handleSearch}
                        allowClear={{
                            clearIcon: <span onClick={handleSearchClear}>✕</span>,
                        }}
                        enterButton={
                            <Button
                                type="primary"
                                icon={<SearchOutlined />}
                                style={{
                                    backgroundColor: '#23A55A',
                                    borderColor: '#23A55A',
                                }}
                            >
                                Search
                            </Button>
                        }
                        size="large"
                    />
                </Col>
                <Col>
                    <ConfigProvider
                        theme={{
                            token: { colorBgContainer: '#E9F6EF' },
                            components: {
                                Button: {
                                    defaultBg: 'white',
                                    defaultColor: '#23A55A',
                                    defaultBorderColor: '#23A55A',
                                    defaultHoverColor: '#23A55A',
                                    defaultHoverBorderColor: '#23A55A',
                                },
                            },
                        }}
                    >
                        <Button
                            icon={<PlusOutlined />}
                            onClick={() => setActionMode('add')}
                            size="large"
                        >
                            Tambah Data
                        </Button>
                    </ConfigProvider>
                </Col>
            </Row>
            <Col xs={24} sm={24} md={24} lg={24} xl={24} style={{ marginTop: '16px' }}>
                <TableList
                    getData={getAllPlantSection}
                    queryParams={formDataFilter}
                    columns={columns}
                    triger={trigerFilter}
                />
            </Col>
        </Card>
    );
};

export default ListPlantSection;