import { IconFilter } from '@douyinfe/semi-icons';
import { Card, Tag, Typography } from '@douyinfe/semi-ui';
import type { ComponentProps, ReactNode } from 'react';
import { MobileFilterToggle } from './MobileFilterToggle';

const { Text, Title } = Typography;

type WorkspaceFilterPanelProps = {
  title?: string;
  description: string;
  mobileSummary: string;
  expanded: boolean;
  onToggle: () => void;
  children: ReactNode;
  className?: string;
  status?: ReactNode;
  statusColor?: ComponentProps<typeof Tag>['color'];
  collapsedLabel?: string;
};

export function WorkspaceFilterPanel({
  title = '查询条件',
  description,
  mobileSummary,
  expanded,
  onToggle,
  children,
  className = '',
  status = '默认范围',
  statusColor = 'grey',
  collapsedLabel = '修改'
}: WorkspaceFilterPanelProps) {
  const panelClassName = [
    'v2-workspace-filter-panel',
    className,
    expanded ? '' : 'is-mobile-collapsed'
  ].filter(Boolean).join(' ');

  return <>
    <MobileFilterToggle
      title={title}
      summary={mobileSummary}
      expanded={expanded}
      collapsedLabel={collapsedLabel}
      onToggle={onToggle}
    />
    <Card className={panelClassName} bodyStyle={{ padding: 0 }}>
      <header className="v2-workspace-filter-heading">
        <span className="v2-workspace-filter-icon" aria-hidden="true"><IconFilter /></span>
        <span className="v2-workspace-filter-copy">
          <Title heading={5}>{title}</Title>
          <Text type="tertiary" size="small">{description}</Text>
        </span>
        <Tag color={statusColor} type="light" size="small">{status}</Tag>
      </header>
      {children}
    </Card>
  </>;
}
