import { Button } from "design-system/components/Button";
import { Icon } from "design-system/components/Icon";
import { Screen } from "design-system/components/Screen";
import { Text } from "design-system/components/Text";
import { Box } from "design-system/primitives/Box/Box";
import { Row } from "design-system/primitives/Row";
import { Stack } from "design-system/primitives/Stack";

export function Buttons() {
  return (
    <Screen
      as="ScrollView"
      options={{
        title: "Buttons",
        headerRight: () => (
          <Row space="5px">
            <Button variant="icon">
              <Icon name="IconClose" />
            </Button>
            <Button themeColor="secondary" variant="icon">
              <Icon name="IconClose" />
            </Button>
          </Row>
        ),
      }}
    >
      <Stack space="24px">
        <Text flex={1} variant="title">
          Default Buttons
        </Text>
        <Stack space="12px">
          <Button variant="solid">
            <Button.Text>Solid</Button.Text>
          </Button>
          <Button variant="outline">
            <Button.Text>Outline</Button.Text>
          </Button>
          <Button variant="soft">
            <Button.Text>Soft</Button.Text>
          </Button>
          <Button variant="link">
            <Button.Text>Link</Button.Text>
          </Button>
          <Button variant="unstyled">
            <Button.Text>Unstyled</Button.Text>
          </Button>
        </Stack>

        <Box backgroundColor="black" marginHorizontal="-32px" padding="32px">
          <Stack space="32px">
            <Text flex={1} variant="title" color="white">
              Buttons with overrides
            </Text>
            <Stack space="12px">
              <Button width={200} paddingHorizontal="12px">
                <Button.Text>Custom Width</Button.Text>
              </Button>
              <Button themeColor="secondary">
                <Button.Text>Secondary theme</Button.Text>
              </Button>
              <Button variant="outline" height={100}>
                <Button.Text>Custom height</Button.Text>
              </Button>
              <Button variant="soft" width={100} height={100} borderRadius="0px">
                <Button.Text>Soft</Button.Text>
              </Button>

              <Button variant="link">
                <Button.Text>Link</Button.Text>
              </Button>
              <Button
                variant="unstyled"
                textColor="white"
                style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}
              >
                <Button.Text>Unstyled</Button.Text>
              </Button>
            </Stack>
          </Stack>
        </Box>

        <Stack space="24px">
          <Text flex={1} variant="title">
            Unstyled
          </Text>
          <Box backgroundColor={{ custom: "#303036" }} borderRadius="12px" style={{ overflow: "hidden" }}>
            <Stack separator={<Box backgroundColor="divider" height={1} width="100%" />}>
              <Button
                variant="unstyled"
                paddingHorizontal="24px"
                onPressColor={{ custom: "rgba(255,255,255,0.25)" }}
                width="100%"
              >
                <Text color="white" flex={1}>
                  Home settings
                </Text>
              </Button>
              <Button
                variant="unstyled"
                paddingHorizontal="24px"
                onPressColor={{ custom: "rgba(255,255,255,0.25)" }}
                width="100%"
              >
                <Text color="white" flex={1}>
                  Home settings
                </Text>
              </Button>
            </Stack>
          </Box>
          <Box backgroundColor={{ custom: "#FFFFFF" }} borderRadius="12px" style={{ overflow: "hidden" }}>
            <Stack separator={<Box backgroundColor="divider" height={1} width="100%" />}>
              <Button
                variant="unstyled"
                paddingHorizontal="24px"
                onPressColor={{ custom: "rgba(0,0,0,0.25)" }}
                width="100%"
              >
                <Text flex={1}>Home settings</Text>
              </Button>
              <Button
                variant="unstyled"
                paddingHorizontal="24px"
                onPressColor={{ custom: "rgba(0,0,0,0.25)" }}
                width="100%"
              >
                <Text flex={1}>Home settings</Text>
              </Button>
            </Stack>
          </Box>
        </Stack>
      </Stack>
    </Screen>
  );
}