import { useState } from 'react';
import { Button, Card, Field, Heading, Input, Select, Tile, VStack } from '@cdx-ui/components';
import { subcategories } from './data';

export function CreateCategoryCard() {
  const [txType, setTxType] = useState('expense');
  const [subcat, setSubcat] = useState<string | undefined>(undefined);
  return (
    <Card>
      <Card.Header>
        <Heading size="sm">Create category</Heading>
      </Card.Header>
      <Card.Content>
        <VStack className="gap-4">
          <Field>
            <Field.Label>Transaction type</Field.Label>
            <Tile.Group
              type="single"
              direction="row"
              shape="card"
              value={txType}
              onValueChange={setTxType}
              aria-label="Transaction type"
            >
              <Tile value="expense" className="flex-1">
                <Tile.Content>
                  <Tile.Title>Expense</Tile.Title>
                </Tile.Content>
                <Tile.Indicator />
              </Tile>
              <Tile value="income" className="flex-1">
                <Tile.Content>
                  <Tile.Title>Income</Tile.Title>
                </Tile.Content>
                <Tile.Indicator />
              </Tile>
            </Tile.Group>
          </Field>

          <Field>
            <Field.Label>Category name</Field.Label>
            <Input>
              <Input.Field placeholder="e.g. Groceries" />
            </Input>
            <Field.Helper>This is the name of the category you want to create.</Field.Helper>
          </Field>

          <Field>
            <Field.Label>Subcategory of</Field.Label>
            <Select
              items={subcategories}
              value={subcat}
              onValueChange={setSubcat}
              accessibilityLabel="Subcategory"
            >
              <Select.Trigger>
                <Select.Value placeholder="Select…" />
              </Select.Trigger>
              <Select.Content>
                {subcategories.map((option) => (
                  <Select.Item key={option.value} value={option.value}>
                    <Select.ItemLabel>{option.label}</Select.ItemLabel>
                  </Select.Item>
                ))}
              </Select.Content>
            </Select>
          </Field>

          <Button variant="solid" color="action" fullWidth onPress={() => {}}>
            <Button.Label>Save</Button.Label>
          </Button>
        </VStack>
      </Card.Content>
    </Card>
  );
}