import {FloatButton, Input, List, Result, Row, Typography} from "antd";
import {PlusOutlined, SwitcherOutlined} from "@ant-design/icons";
import SetListCard from "../../../../Dummies/SetListCard.jsx";
import SetFormModal from "./Components/SetFormModal/SetFormModal.jsx";
import LoadingIndicator from "../../../../Widgets/LoadingIndicator/LoadingIndicator.jsx";
import useSets from "./useSets.js";
import useSetsUI from "./useSetsUI.js";


const {Title} = Typography;

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

    if (setsData.isError) return (
        <Result
            status="error"
            title="Ошибка"
            subTitle="Произошла ошибка в работе страницы"
        />
    );

    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 SetsTab;