import { Box, Stack, Typography } from '@mui/material';
import { useState } from 'react';
import { ThemeProvider } from '@arcblock/ux/lib/Theme';
import { ThemeModeToggle } from '@arcblock/ux/lib/Config';
import AppBadge from './app-badge';

export default {
  title: 'Blocklet-UI-React/Dashboard',
  component: AppBadge,
};

export function Badges() {
  const [checked, setChecked] = useState(true);

  return (
    <ThemeProvider prefer="system">
      <ThemeModeToggle />
      <Box sx={{ p: 3, backgroundColor: 'background.default' }}>
        <Stack spacing={2}>
          <Typography variant="h6">Loading</Typography>
          <Stack direction="row" spacing={2}>
            <AppBadge label="Loading" value="Value" loading />
          </Stack>
          <Typography variant="h6">Default</Typography>
          <Stack direction="row" spacing={2}>
            <AppBadge label="Label" value="Value" />
            <AppBadge icon="lucide:info" label="Label" value="Value" />
          </Stack>
          <Typography variant="h6">Number</Typography>
          <Stack direction="row" spacing={2}>
            <AppBadge variant="number" value={1234} />
            <AppBadge variant="number" value={1234567} round={1} />
            <AppBadge variant="number" label="Label" value={1234567890} round={2} />
          </Stack>
          <Typography variant="h6">Time</Typography>
          <Stack direction="row" spacing={2}>
            <AppBadge variant="time" value={new Date()} />
            <AppBadge variant="time" label="Label" value={Date.now() - 3600000} />
          </Stack>
          <Typography variant="h6">State</Typography>
          <Stack direction="row" spacing={2}>
            <AppBadge variant="state" value="Running" color="success" />
            <AppBadge variant="state" value="Stopped" color="error" />
            <AppBadge variant="state" value="Warning" color="warning" />
          </Stack>
          <Typography variant="h6">Version</Typography>
          <Stack direction="row" spacing={2}>
            <AppBadge variant="version" value="1.0.0" color="info" />
            <AppBadge variant="version" icon="lucide:package" value="2.3.4" color="primary" />
          </Stack>
          <Typography variant="h6">DID</Typography>
          <Stack direction="row" spacing={2}>
            <AppBadge variant="did" value="z1kFxaZ5hJXHhqJzXqJzXqJzXqJzXqJzXqJz" />
            <AppBadge variant="did" value="0x1234567890123456789012345678901234567890" />
          </Stack>
          <Typography variant="h6">Switch</Typography>
          <Stack direction="row" spacing={2}>
            <AppBadge variant="switch" label="Toggle" value={checked} onChange={setChecked} />
          </Stack>
        </Stack>
      </Box>
    </ThemeProvider>
  );
}
