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

const ComplexTag = () => (
    <div className="border-radius-pill border p-y-half p-x-1 skeleton-item d-f flex-row">
        <BodyText>some text</BodyText>
    </div>
);

export const CustomCard: FC<{ className?: string; onStartClick?(): void }> = ({
    className,
    onStartClick,
}) => (
    <Card className={className}>
        <Card.Section>
            <Stack spacing={2}>
                <Avatar className="skeleton-item" name="Skeleton Rocks" />

                <Stack.Item fill>
                    <Headline className="skeleton-text m-b-1">lorem ipsum text</Headline>
                    <Eyebrow className="skeleton-text-75 m-b-1">lorem ipsum text</Eyebrow>
                    <BodyText className="skeleton-text-33">lorem ipsum text</BodyText>
                </Stack.Item>
            </Stack>

            <Stack spacing={2} className="m-t-1">
                <ComplexTag />
            </Stack>

            <Stack spacing={2} className="m-t-1 skeleton-item" justifyContent="space-between">
                <Link href="#" primary>
                    some link
                </Link>
                <Checkbox className="skeleton-hidden" label="some checkbox" />
            </Stack>

            <Stack className="m-t-1" alignItems="center">
                <Icon name="question_answer" className="m-r-1 skeleton-none" />
                <BodyText className="skeleton-item">Customer Name</BodyText>
            </Stack>

            <Stack className="m-t-1" alignItems="center" spacing={2}>
                <StatusLight className="skeleton-item">Status light</StatusLight>
                <StatusLight className="skeleton-item" />
                <StatusLight className="skeleton-text-50" />
            </Stack>

            <Stack alignItems="center" spacing={1} className="m-t-1">
                <Input className="skeleton-item" size="small" icon={<Icon name="search" />} />
                <FilterButton className="skeleton-item" icon="funnel" value={1} label="" />
                <Popover
                    trigger={
                        <FilterButton className="skeleton-item" icon="funnel" label="filter">
                            Filter
                        </FilterButton>
                    }
                >
                    some content
                </Popover>
            </Stack>

            <Stack alignItems="flex-end" spacing={1}>
                <div style={{ width: '300px' }}>
                    <AnvilSelect trigger={{ className: 'skeleton-item' }} />
                </div>
                <Form.AnvilSelect className="skeleton-item" label="select" />
            </Stack>
        </Card.Section>

        <Card.Section>
            <Button className="skeleton-item" primary onClick={onStartClick}>
                Show skeleton
            </Button>
        </Card.Section>
    </Card>
);

export const ManualExample: FC = () => {
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        if (isLoading) {
            setTimeout(() => {
                setIsLoading(false);
            }, 5000);
        }
    }, [isLoading]);

    const onStart = () => setIsLoading(true);

    return <CustomCard className={isLoading ? 'skeleton' : ''} onStartClick={onStart} />;
};