import {FloatButton, Input, List, Row, Typography} from "antd";
import {PlusOutlined, SwitcherOutlined} from "@ant-design/icons";
import SetListCard from "../../components/sets/SetListCard.jsx";
import SetFormModal from "../../components/sets/SetFormModal.jsx";
import LoadingIndicator from "../../components/LoadingIndicator.jsx";
import useSets from "../../hooks/data/useSets.js";
import useSetsUI from "../../hooks/ui/useSetsUI.js";


const {Title} = Typography;

const SetLensesPage = () => {
    const setsData = useSets();
    const setsUI = useSetsUI(setsData.sets);

    return (
        <div style={setsUI.containerStyle}>
            <Title level={1}><SwitcherOutlined/> Наборы линз</Title>
            <Row style={setsUI.filterBarStyle}>
                <Input
                    placeholder="Поиск набора"
                    onChange={(e) => setsUI.handleSetSearchText(e.target.value)}
                    style={setsUI.formItemStyle}
                    allowClear
                />
            </Row>

            {setsData.isLoading ? (
                <LoadingIndicator/>
            ) : (
                <List
                    grid={{
                        gutter: 16,
                        xs: 1,
                        sm: 1,
                        md: 2,
                        lg: 2,
                        xl: 3,
                        xxl: 3,
                    }}
                    dataSource={setsUI.filteredSets}
                    renderItem={(set) => (
                        <List.Item>
                            <SetListCard
                                set={set}
                                handleEditSet={setsUI.handleEditSet}
                                handleDeleteSet={setsData.handleDeleteSet}
                                handleAppendSet={setsData.handleAppendSet}
                            />
                        </List.Item>
                    )}
                    pagination={setsUI.pagination}
                />
            )}

            <FloatButton
                icon={<PlusOutlined/>}
                type="primary"
                tooltip="Добавить набор"
                onClick={setsUI.handleAddSet}
            />

            <SetFormModal
                visible={setsUI.isModalVisible}
                onCancel={setsUI.handleCloseModal}
                onSubmit={setsData.handleModalSetSubmit}
                setData={setsUI.selectedSet}
            />
        </div>
    );
};

export default SetLensesPage;