import {
    AnvilSelect,
    Avatar,
    BodyText,
    Button,
    Card,
    Checkbox,
    FilterButton,
    Form,
    Icon,
    InlineEdit,
    Input,
    Link,
    Popover,
    Stack,
    StatusLight,
    Tag,
    ToggleSwitch,
} from '@servicetitan/design-system';
import { FC } from 'react';
import '../styles.css';

export const BasicCard: FC<{ className?: string }> = ({ className }) => (
    <Card className={className}>
        <Stack direction="column" spacing={1}>
            <Stack>
                <Stack.Item className="m-r-2">
                    <Icon className="c-neutral-90" name="location_on" size={24} />
                </Stack.Item>

                <Stack.Item fill>
                    <BodyText>lorem ipsum text</BodyText>
                </Stack.Item>
            </Stack>
            <Stack>
                <Stack.Item className="m-r-2">
                    <Button size="xsmall">Click me</Button>
                </Stack.Item>

                <Stack.Item fill>
                    <BodyText className="skeleton-text-75">lorem ipsum text</BodyText>
                </Stack.Item>
            </Stack>
            <Stack>
                <Stack.Item className="m-r-2">
                    <Tag color="info">some tag</Tag>
                </Stack.Item>
                <Stack.Item className="m-r-2">
                    <Tag subtle>other tag</Tag>
                </Stack.Item>

                <Stack.Item fill>
                    <BodyText className="skeleton-text-50">lorem ipsum text</BodyText>
                </Stack.Item>
            </Stack>
            <Stack alignItems="center">
                <Icon name="question_answer" className="m-r-1 skeleton-none" />
                <BodyText>Customer Name</BodyText>
            </Stack>
            <Stack spacing={2} justifyContent="space-between">
                <Link primary>some link</Link>
                <Link primary href="#">
                    some link
                </Link>

                <Checkbox label="some checkbox" />
            </Stack>
            <Stack spacing={2}>
                <ToggleSwitch />
            </Stack>
            <Stack spacing={2}>
                <StatusLight>Status light</StatusLight>
                <BodyText>
                    Some text with{' '}
                    <InlineEdit
                        className="skeleton-hidden"
                        control={() => <Input />}
                        value="inline edit"
                    />
                </BodyText>

                <div>
                    <InlineEdit
                        control={() => <Input />}
                        content={() => <StatusLight color="warning">Status light</StatusLight>}
                        value="Status light"
                        autoFocusControl={false}
                        actionDirection="bl"
                        actionLayout="floating"
                        decoration={{ icon: false, underline: false, color: false }}
                        placeholder="Select status"
                        width="fluid"
                    />
                </div>
            </Stack>

            <Stack alignItems="center" spacing={1}>
                <Input size="small" icon={<Icon name="search" />} />
                <Button size="small">some button</Button>
                <FilterButton icon="funnel" value={1} label="" />
                <Popover
                    trigger={
                        <FilterButton icon="funnel" label="filter">
                            Filter
                        </FilterButton>
                    }
                >
                    some content
                </Popover>
            </Stack>

            <Stack alignItems="flex-end" spacing={1}>
                <div style={{ width: '300px' }}>
                    <AnvilSelect />
                </div>
                <Form.AnvilSelect label="select" />
            </Stack>
            <Avatar name="Rose Tico" size="l" />
        </Stack>
    </Card>
);

export const AutoExample: FC = () => (
    <Stack direction="column" spacing={2}>
        <BasicCard />
        <BasicCard className="skeleton-auto" />
    </Stack>
);