import { IconChevronRight, IconMore } from '@douyinfe/semi-icons';
import { Button } from '@douyinfe/semi-ui';
import type { ReactNode } from 'react';
import { useState } from 'react';
import { WorkspaceSideSheet } from '../shared/WorkspaceSideSheet';

export type VehicleAction = {
  key: string;
  label: string;
  icon: ReactNode;
  to: string;
  type: 'primary' | 'tertiary';
};

export default function VehicleActions({
  actions,
  mobile,
  onSelect
}: {
  actions: VehicleAction[];
  mobile: boolean;
  onSelect: (to: string) => void;
}) {
  const [open, setOpen] = useState(false);
  const primaryActions = actions.filter((action) => action.key === 'switch' || action.key === 'tracks');
  const overflowActions = actions.filter((action) => action.key !== 'switch' && action.key !== 'tracks');
  const selectAction = (to: string) => {
    setOpen(false);
    onSelect(to);
  };
  if (!mobile) return <div className="v2-identity-actions" role="group" aria-label="车辆快捷操作">
    {actions.map((action) => <Button key={action.key} theme="light" type={action.type} icon={action.icon} aria-label={action.label} onClick={() => onSelect(action.to)}>{action.label}</Button>)}
  </div>;

  return <>
    <div className="v2-identity-actions" role="group" aria-label="车辆快捷操作">
      {primaryActions.map((action) => <Button key={action.key} theme="light" type={action.type} icon={action.icon} aria-label={action.label} onClick={() => selectAction(action.to)}>{action.label}</Button>)}
      {overflowActions.length ? <Button className="v2-vehicle-more-trigger" theme="light" type="tertiary" icon={<IconMore />} aria-label="更多车辆操作" aria-haspopup="dialog" aria-controls="v2-vehicle-mobile-actions" aria-expanded={open} onClick={() => setOpen(true)}>更多</Button> : null}
    </div>
    <WorkspaceSideSheet
      className="v2-vehicle-mobile-actions-sidesheet"
      variant="action"
      visible={open}
      placement="bottom"
      height="min(48dvh, 380px)"
      icon={<IconMore />}
      ariaLabel="更多车辆操作"
      dialogId="v2-vehicle-mobile-actions"
      title="更多车辆操作"
      description="继续查看这辆车的历史、里程与告警"
      badge={`${overflowActions.length} 项`}
      onCancel={() => setOpen(false)}
      footerNote="选择操作后将自动进入对应车辆页面"
      primaryAction={{ label: '完成', onClick: () => setOpen(false) }}
    >
      <div className="v2-vehicle-mobile-actions-list">
        {overflowActions.map((action) => <Button key={action.key} block theme="light" type="tertiary" icon={action.icon} iconPosition="left" aria-label={action.label} onClick={() => selectAction(action.to)}>{action.label}<IconChevronRight /></Button>)}
      </div>
    </WorkspaceSideSheet>
  </>;
}