'use client';

import React from 'react';
import { Search } from 'lucide-react';
import { ICON_SIZE_MD } from '@/components/icons';
import { Input, Modal, Select, Space } from 'antd';
import type { ModalProps } from 'antd';
import { FiltrosModalFooterPadrao } from '@/components/listings';
import type { PaginaWebsiteStatus, PaginaWebsiteStatusAprovacao, PaginaWebsiteTipo } from '@/types/projeto';
import {
    PRIORIDADE_OPCOES,
    STATUS_APROVACAO_OPCOES,
    STATUS_OPCOES,
    TIPO_OPCOES,
} from '../constants';
import type { PaginasSiteListingState } from '../hooks/usePaginasSiteListing';

export type ModalFiltrosPaginasSiteProps = {
    open: boolean;
    onClose: () => void;
    filtros: PaginasSiteListingState['filtros'];
    usuarios: { id: number; nome: string }[];
    tagsUnicas: string[];
    onLimparTodos: () => void;
    modalWidth?: ModalProps['width'];
    modalCentered?: boolean;
    modalStyles?: ModalProps['styles'];
};

export function ModalFiltrosPaginasSite({
    open,
    onClose,
    filtros,
    usuarios,
    tagsUnicas,
    onLimparTodos,
    modalWidth,
    modalCentered,
    modalStyles,
}: ModalFiltrosPaginasSiteProps) {
    const {
        filtroTexto,
        setFiltroTexto,
        filtroStatus,
        setFiltroStatus,
        filtroStatusAprovacao,
        setFiltroStatusAprovacao,
        filtroTipo,
        setFiltroTipo,
        filtroPrioridade,
        setFiltroPrioridade,
        filtroResponsavelId,
        setFiltroResponsavelId,
        filtroTag,
        setFiltroTag,
    } = filtros;

    return (
        <Modal
            title="Filtrar páginas do site"
            data-testid="projeto-software-paginas-filtros-modal"
            open={open}
            onCancel={onClose}
            width={modalWidth ?? 420}
            centered={modalCentered}
            styles={modalStyles}
            footer={
                <FiltrosModalFooterPadrao
                    onLimparTodos={onLimparTodos}
                    onFechar={onClose}
                    showFiltrarPrimary={false}
                    dataTestIdLimparTodos="projeto-software-paginas-filtros-modal-limpar-todos"
                />
            }
            destroyOnHidden
            keyboard
            focusTriggerAfterClose
        >
            <Space direction="vertical" style={{ width: '100%' }} size="middle">
                <Input
                    placeholder="Buscar por título ou slug..."
                    prefix={<Search size={ICON_SIZE_MD} aria-hidden />}
                    value={filtroTexto}
                    onChange={(e) => setFiltroTexto(e.target.value)}
                    allowClear
                />
                <Select<PaginaWebsiteStatus>
                    placeholder="Status publicação"
                    allowClear
                    style={{ width: '100%' }}
                    value={filtroStatus}
                    onChange={setFiltroStatus}
                    options={STATUS_OPCOES}
                />
                <Select<PaginaWebsiteStatusAprovacao>
                    placeholder="Aprovação de conteúdo"
                    allowClear
                    style={{ width: '100%' }}
                    value={filtroStatusAprovacao}
                    onChange={setFiltroStatusAprovacao}
                    options={STATUS_APROVACAO_OPCOES}
                />
                <Select<PaginaWebsiteTipo>
                    placeholder="Tipo"
                    allowClear
                    style={{ width: '100%' }}
                    value={filtroTipo}
                    onChange={setFiltroTipo}
                    options={TIPO_OPCOES}
                />
                <Select
                    placeholder="Prioridade"
                    allowClear
                    style={{ width: '100%' }}
                    value={filtroPrioridade}
                    onChange={setFiltroPrioridade}
                    options={PRIORIDADE_OPCOES}
                />
                <Select
                    placeholder="Responsável"
                    allowClear
                    style={{ width: '100%' }}
                    value={filtroResponsavelId}
                    onChange={setFiltroResponsavelId}
                    options={usuarios.map((u) => ({ value: u.id, label: u.nome }))}
                    showSearch
                    optionFilterProp="label"
                />
                <Select
                    placeholder="Tag"
                    allowClear
                    style={{ width: '100%' }}
                    value={filtroTag}
                    onChange={setFiltroTag}
                    options={tagsUnicas.map((t) => ({ value: t, label: t }))}
                />
            </Space>
        </Modal>
    );
}