import { useState } from 'react'
import { Button } from '@astryxdesign/core/Button'
import { HStack } from '@astryxdesign/core/HStack'
import { Icon } from '@astryxdesign/core/Icon'
import { IconButton } from '@astryxdesign/core/IconButton'
import { Kbd } from '@astryxdesign/core/Kbd'
import { Link } from '@astryxdesign/core/Link'
import {
  SegmentedControl,
  SegmentedControlItem,
} from '@astryxdesign/core/SegmentedControl'
import { Text } from '@astryxdesign/core/Text'
import { ToggleButton, ToggleButtonGroup } from '@astryxdesign/core/ToggleButton'
import { Toolbar } from '@astryxdesign/core/Toolbar'
import { VStack } from '@astryxdesign/core/VStack'
import { Heart, List, LayoutGrid } from 'lucide-react'

export function ActionsDemo() {
  const [layout, setLayout] = useState('网格')
  const [view, setView] = useState('概览')

  return (
    <VStack gap={4}>
      <Toolbar
        label="常用操作"
        startContent={
          <HStack gap={2} wrap="wrap">
            <Button label="主要操作" variant="primary" size="sm" />
            <Button label="次要操作" variant="secondary" size="sm" />
            <Button label="幽灵按钮" variant="ghost" size="sm" />
          </HStack>
        }
        endContent={
          <IconButton
            label="收藏"
            tooltip="收藏"
            variant="ghost"
            icon={<Icon icon={Heart} />}
          />
        }
      />

      <HStack gap={4} wrap="wrap" vAlign="center">
        <ToggleButtonGroup
          label="调整视图布局"
          value={layout}
          onChange={(value) => setLayout((value as string | null) ?? '网格')}
          size="sm">
          <ToggleButton
            label="网格"
            value="网格"
            icon={<Icon icon={LayoutGrid} size="sm" />}
          />
          <ToggleButton
            label="列表"
            value="列表"
            icon={<Icon icon={List} size="sm" />}
          />
        </ToggleButtonGroup>

        <SegmentedControl
          label="切换视图"
          value={view}
          onChange={setView}
          size="sm">
          <SegmentedControlItem label="概览" value="概览" />
          <SegmentedControlItem label="活动" value="活动" />
          <SegmentedControlItem label="成员" value="成员" />
        </SegmentedControl>
      </HStack>

      <HStack gap={3} vAlign="center" wrap="wrap">
        <Link href="/about" isStandalone>
          查看关于页
        </Link>
        <Text type="supporting" size="sm">
          快捷键
        </Text>
        <Kbd keys="mod+k" />
      </HStack>
    </VStack>
  )
}