import {
    Avatar, Breadcrumbs,
    Button,
    Card,
    Checkbox,
    Chip,
    Combobox,
    FieldLabel,
    Flex,
    Link,
    SearchField,
    SegmentedControl,
    Tab,
    Text,
    TextField,
    NumberField,
    SelectCard,
    Grid,
} from '@servicetitan/anvil2';
import MenuIcon from "@servicetitan/anvil2/assets/icons/material/round/menu.svg";

import { FC, useState } from 'react';
import '../anvil2.css';

type ItemType = { id: string; label: string };
const comboItems: ItemType[] = [
    { id: '1', label: 'Item 1' },
    { id: '2', label: 'Item 2' },
    { id: '3', label: 'Item 3' },
    { id: '4', label: 'Item 4' }
]

function SegmentedControlBox() {
    const [selected, setSelected] = useState("level 2");

    return (
        <Flex direction="column" gap="6">
            <SegmentedControl selected={selected} onChange={setSelected}>
                <SegmentedControl.Segment value="level 1" icon={MenuIcon}>
                    Level 1
                </SegmentedControl.Segment>
                <SegmentedControl.Segment value="level 2" icon={MenuIcon}>
                    Level 2
                </SegmentedControl.Segment>
                <SegmentedControl.Segment value="level 3" icon={MenuIcon}>
                    Level 3
                </SegmentedControl.Segment>
                <SegmentedControl.Segment value="level 4" icon={MenuIcon}>
                    Level 4
                </SegmentedControl.Segment>
            </SegmentedControl>
        </Flex>
    );
}

function SelectCardBox() {
    return (
        <SelectCard.Group
            legend="Choose an option"
            selectionMode="single"
            value={["1"]}
            showSelectIndicator
            required
        >
            <Grid gap="4" templateColumns="repeat(3, 1fr)">
                {[
                    {
                        id: "1",
                        label: "Cooling Tune Up",
                        cost: "$100",
                        timeEstimate: "1 hour",
                    },
                    {
                        id: "2",
                        label: "Heating Tune Up",
                        cost: "$150",
                        timeEstimate: "2 hours",
                    },
                    {
                        id: "3",
                        label: "Air Duct Cleaning",
                        cost: "$200",
                        timeEstimate: "3 hours",
                    },
                ].map((item) => (
                    <SelectCard key={item.id} id={item.id}>
                        <Grid templateColumns="repeat(2, 1fr)" gap="4">
                            <Text variant="headline" size="small" el="h2">
                                {item.label}
                            </Text>
                            <Chip label={item.cost} justifySelf="end" />
                            <Text variant="body" size="small" subdued>
                                ~{item.timeEstimate}
                            </Text>
                        </Grid>
                    </SelectCard>
                ))}
            </Grid>
        </SelectCard.Group>
    );
}
export const BasicCard: FC<{ className?: string }> = ({ className }) => (
    <Card className={className}>
        <Flex direction="column" rowGap={1} gap={2}>
            <Flex>
                <Breadcrumbs>
                    <Breadcrumbs.Link>Home Page</Breadcrumbs.Link>
                    <Breadcrumbs.Link href="https://google.com">Sub Page</Breadcrumbs.Link>
                    <Breadcrumbs.Link>Current Page</Breadcrumbs.Link>
                </Breadcrumbs>
            </Flex>
            <Flex>
                <Flex grow={1} basis={0}>
                    <Text>lorem ipsum text</Text>
                </Flex>
            </Flex>
            <Flex gap={2}>
                <Button size="small">Click me</Button>
                <Button size="small" disabled>Click me</Button>

                <Flex grow={1} basis={0}>
                    <Text className="skeleton-text-75">lorem ipsum text</Text>
                </Flex>
            </Flex>
            <Flex>
                <div className="m-r-2">
                    <Chip color="#00ff00" label="some tag" />
                </div>
                <div className="m-r-2">
                    <Chip label="Chip" />
                </div>

                <Flex grow={1} basis={0}>
                    <Text className="skeleton-text-50">lorem ipsum text</Text>
                </Flex>
            </Flex>
            <Flex alignItems="center" gap={3}>
                <Text>Customer Name</Text>
                <FieldLabel>Customer Name</FieldLabel>
            </Flex>
            <Flex gap={2} justifyContent="space-between">
                <Link>some link</Link>
                <Link appearance="primary" href="#">
                    some link
                </Link>

                <Checkbox label="some checkbox" />
            </Flex>

            <Flex alignItems="center" gap={1}>
                <TextField size="small" label="text field" required />
                <Button size="small">some button</Button>
                <NumberField size="small" />
            </Flex>

            <Avatar name="Rose Tico" size="large" />

            <Tab defaultIndex={0}>
                <Tab.List>
                    <Tab.Button id="Summary" controls="Summary">
                        Summary
                    </Tab.Button>
                    <Tab.Button id="Transcript" controls="Transcript">
                        Transcript
                    </Tab.Button>
                </Tab.List>
            </Tab>

            <Tab defaultIndex={0} className="skeleton-item">
                <Tab.List>
                    <Tab.Button id="Summary" controls="Summary">
                        Summary
                    </Tab.Button>
                    <Tab.Button id="Transcript" controls="Transcript">
                        Transcript
                    </Tab.Button>
                </Tab.List>
            </Tab>

            <Text className="skeleton-text-lines-5">short</Text>

            <SearchField placeholder="Search for smth" />

            <SegmentedControlBox />

            <SelectCardBox />
        </Flex>
    </Card>
);


export const ComboboxCard: FC<{ className?: string }> = ({ className }) => (
    <Card className={className}>
        <Flex direction="column" rowGap={3}>
            <div style={{ width: '300px' }}>
                <Combobox
                    items={comboItems}
                    itemToString={item => (item?.label ?? '')}
                    selectedItem={comboItems[0]}
                    onChange={() => {}}
                    filterOptions={{ keys: ['name'] }}
                >
                    <Combobox.SearchField />
                    <Combobox.Content>
                        {({ items }) => (
                            <Combobox.List>
                                {items.map((item, i) => (
                                    <Combobox.Item key={item.id} item={item} index={i}>
                                        {item.label}
                                    </Combobox.Item>
                                ))}
                            </Combobox.List>
                        )}
                    </Combobox.Content>
                </Combobox>
            </div>

            <Combobox.Select<ItemType>
                items={comboItems}
                multiple
                selectedItems={[comboItems[0]]}
                itemToString={item => item?.label ?? ''}
                disableCloseOnSelectItem
            >
                <Combobox.SelectTrigger
                    required
                    label="Trigger"
                    placeholder="Select Trigger"
                />
                <Combobox.Content<ItemType>>
                    {({ items }) => (
                        <Combobox.List>
                            {items.map((item, i) => (
                                <Combobox.Item key={item.id} item={item} index={i}>
                                    {item.label}
                                </Combobox.Item>
                            ))}
                        </Combobox.List>
                    )}
                </Combobox.Content>
            </Combobox.Select>
        </Flex>
    </Card>
);

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