import { IconFilter } from '@douyinfe/semi-icons';
import { type ReactNode } from 'react';
import { WorkspaceSideSheet } from './WorkspaceSideSheet';

type MobileFilterSheetAction = {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  loading?: boolean;
};

type MobileFilterSheetProps = {
  className?: string;
  visible: boolean;
  height?: string | number;
  ariaLabel: string;
  dialogId?: string;
  closeLabel?: string;
  title: string;
  description: string;
  onCancel: () => void;
  secondaryAction?: MobileFilterSheetAction;
  primaryAction: MobileFilterSheetAction;
  children: ReactNode;
};

export function MobileFilterSheet({
  className = '',
  visible,
  height = 'min(82dvh, 700px)',
  ariaLabel,
  dialogId,
  closeLabel,
  title,
  description,
  onCancel,
  secondaryAction,
  primaryAction,
  children
}: MobileFilterSheetProps) {
  const sheetClassName = ['v2-mobile-filter-sheet', className].filter(Boolean).join(' ');

  return <WorkspaceSideSheet
    className={sheetClassName}
    variant="filter"
    visible={visible}
    ariaLabel={ariaLabel}
    dialogId={dialogId}
    closeLabel={closeLabel}
    placement="bottom"
    height={height}
    title={title}
    description={description}
    icon={<IconFilter />}
    badge="筛选范围"
    onCancel={onCancel}
    footerNote="筛选条件仅在应用后更新当前结果"
    secondaryActions={secondaryAction ? [secondaryAction] : []}
    primaryAction={primaryAction}
  >
    {children}
  </WorkspaceSideSheet>;
}

type MobileFilterSheetSectionProps = {
  className?: string;
  ariaLabel: string;
  title: string;
  description: string;
  children: ReactNode;
};

export function MobileFilterSheetSection({
  className = '',
  ariaLabel,
  title,
  description,
  children
}: MobileFilterSheetSectionProps) {
  const sectionClassName = ['v2-mobile-filter-sheet-section', className].filter(Boolean).join(' ');
  return <section className={sectionClassName} aria-label={ariaLabel}>
    <header><strong>{title}</strong><span>{description}</span></header>
    {children}
  </section>;
}
