colinha.tsx

import { H1, Text, View } from '@doppio/core';
import { Alert, Button, Checkbox, Radio, Spacer, TextArea } from '@doppio/elements';
import { RadioGroup } from '@doppio/patterns';
import * as React from 'react';

type DrinkSize = '12' | '16';
type DrinkType = 'Espresso' | 'Doppio' | 'Cappuccino';

const modifiers = ['Mocha', 'Vanilla', 'Caramel'];

export const Demo = () => {
  const [drinkSize, setDrinkSize] = React.useState<DrinkSize>('12');
  const [drinkType, setDrinkType] = React.useState<DrinkType>('Espresso');
  const [drinkModifiers, setDrinkModifiers] = React.useState(
    new Array(modifiers.length).fill(false),
  );
  const [isError, setIsError] = React.useState(false);

  const handleModifierChange = (position) => {
    const updateDrinkModifiers = drinkModifiers.map((item, index) =>
      index === position ? !item : item,
    );

    setDrinkModifiers(updateDrinkModifiers);
  };

  return (
    <View>
      <View sx={{ marginBottom: '$8' }}>
        <View sx={{ flexDirection: 'row' }}>
          <H1 sx={{ lineHeight: '$0' }}>Doppio</H1>
          <Spacer right="$3" />
          <Text
            sx={{
              padding: '$2',
              borderRadius: 'default',
              backgroundColor: 'backgroundWeak',
              alignSelf: 'center',
            }}
          >
            v0.2.0
          </Text>
        </View>
        <Text>Odeko's single source of truth</Text>
      </View>

      <View sx={{ marginBottom: '$8' }}>
        <Text sx={{ fontSize: '$2', fontWeight: 'bold', marginBottom: '$3' }}>Drink Size</Text>
        <RadioGroup
          name="drink-size"
          value={drinkSize}
          onChange={(value) => setDrinkSize(value as DrinkSize)}
        >
          <Radio value="12">12 oz.</Radio>
          <Radio value="16">16 oz.</Radio>
        </RadioGroup>
      </View>

      <View sx={{ marginBottom: '$8' }}>
        <Text sx={{ fontSize: '$2', fontWeight: 'bold', marginBottom: '$3' }}>Drink Type</Text>
        <RadioGroup
          name="drink-type"
          value={drinkType}
          onChange={(value) => setDrinkType(value as DrinkType)}
        >
          <Radio value="Espresso">Espresso</Radio>
          <Radio value="Doppio">Doppio</Radio>
          <Radio value="Cappuccino">Cappucino</Radio>
        </RadioGroup>
      </View>

      <View sx={{ marginBottom: '$8' }}>
        <Text sx={{ fontSize: '$2', fontWeight: 'bold', marginBottom: '$3' }}>Modifiers</Text>
        {modifiers.map((modifier, index) => (
          <Checkbox
            checked={drinkModifiers[index]}
            value={modifier}
            onChange={() => handleModifierChange(index)}
          >
            {modifier}
          </Checkbox>
        ))}
      </View>

      <View sx={{ width: '40vw', marginBottom: '$8' }}>
        <TextArea
          label="Special Instructions"
          placeholder="Enter instructions..."
          defaultValue=""
        />
      </View>

      <View sx={{ marginBottom: '$3', flexDirection: 'row' }}>
        <Button onPress={() => setIsError(true)}>Submit Order</Button>
        <Spacer right="$3" />
        <Button onPress={() => setIsError(false)} variant="secondary">
          Cancel
        </Button>
      </View>

      <View sx={{ width: '40vw', opacity: isError ? 1 : 0, transition: 'opacity 0.25s linear' }}>
        <Alert variant="error">Order was unable to be submitted</Alert>
      </View>
    </View>
  );
};