import React from 'react';
import { useTheme } from '@mui/material/styles';
import {
  AddCircleRounded,
  EmailRounded,
  FormatAlignCenter,
  FormatAlignJustify,
  FormatAlignLeft,
  FormatAlignRight,
} from '@mui/icons-material';

import {
  Badge,
  Button,
  Checkbox,
  Chip,
  IconButton,
  Pagination,
  Radio,
  Rating,
  Slider,
  Stack,
  Switch,
  TextField,
  ToggleButton,
  ToggleButtonGroup,
} from '@/mui/components';

function CompareSection() {
  const theme = useTheme();

  return (
    <Stack spacing={3}>
      <Stack direction="row" flexWrap="wrap" spacing={theme.spacing(2, 3)}>
        <div>
          <TextField size="medium" variant="filled" disabled />
        </div>
        <div>
          <TextField size="medium" variant="filled" />
        </div>
      </Stack>
      <Stack direction="row" flexWrap="wrap" spacing={theme.spacing(2, 3)}>
        <div>
          <TextField size="medium" variant="outlined" disabled />
        </div>
        <div>
          <TextField size="medium" variant="outlined" />
        </div>
      </Stack>
      <Stack direction="row" flexWrap="wrap" spacing={theme.spacing(2, 3)}>
        <Button size="medium" variant="contained" color="neutral">
          Text
        </Button>
        <Button size="medium" variant="outlined" color="neutral">
          Text
        </Button>
        <Button size="medium" variant="outlined" color="neutral">
          Text
        </Button>
        <Button size="medium" variant="outlined" color="neutral">
          Text
        </Button>
        <Button size="medium" variant="outlined" color="neutral">
          Text
        </Button>
        <Button size="medium" variant="outlined" color="neutral">
          Text
        </Button>
      </Stack>
      <Stack direction="row" flexWrap="wrap" spacing={theme.spacing(2, 3)}>
        <ToggleButtonGroup
          value="AlignLeft"
          exclusive
          color="neutral"
          size="medium"
          onChange={(/* event, newAlignment */) => null}
        >
          <ToggleButton value="AlignLeft">
            <FormatAlignLeft />
          </ToggleButton>
          <ToggleButton value="AlignRight">
            <FormatAlignRight />
          </ToggleButton>
          <ToggleButton value="AlignCenter">
            <FormatAlignCenter />
          </ToggleButton>
          <ToggleButton value="AlignJustify">
            <FormatAlignJustify />
          </ToggleButton>
        </ToggleButtonGroup>
      </Stack>
      <Stack direction="row" flexWrap="wrap" spacing={theme.spacing(2, 3)} alignItems="center">
        <Checkbox size="medium" defaultChecked color="neutral" />
        <Radio size="medium" checked color="neutral" />
        <Switch size="medium" defaultChecked color="neutral" />
        <Badge color="neutral" variant="standard" shape="circular" badgeContent={2}>
          <IconButton color="neutral" size="medium">
            <EmailRounded />
          </IconButton>
        </Badge>
      </Stack>
      <Stack direction="row" flexWrap="wrap" spacing={theme.spacing(2, 3)}>
        <Chip color="neutral" label="Text" size="medium" />
        <Chip
          variant="filled"
          color="neutral"
          label="Text"
          size="medium"
          icon={<AddCircleRounded />}
          onClick={() => null}
        />
        <Chip
          variant="outlined"
          color="neutral"
          label="Text"
          size="medium"
          icon={<AddCircleRounded />}
          onClick={() => null}
        />
        <Chip
          variant="text"
          color="neutral"
          label="Text"
          size="medium"
          icon={<AddCircleRounded />}
          onClick={() => null}
        />
      </Stack>
      <Stack direction="row" flexWrap="wrap" spacing={theme.spacing(2, 3)}>
        <Pagination page={1} count={20} size="medium" color="neutral" />
      </Stack>
      <Stack direction="row" flexWrap="wrap" spacing={theme.spacing(2, 3)}>
        <Slider
          aria-label="Temperature"
          color="neutral"
          shape="circular"
          defaultValue={30}
          min={0}
          max={100}
          orientation="horizontal"
          size="medium"
          step={10}
          valueLabelDisplay="auto"
          track="normal"
        />
      </Stack>
      <Stack direction="row" flexWrap="wrap" spacing={theme.spacing(2, 3)}>
        <Rating color="neutral" size="medium" max={4} value={4} precision={0.5} onChange={() => null} />
      </Stack>
    </Stack>
  );
}

export default CompareSection;
