import { Breadcrumbs } from "@/app/components/Breadcrumbs/Breadcrumbs";
import { InternalScreen } from "@/app/components/InternalScreen/InternalScreen";
import { SettingsInput } from "@/app/components/SettingsInput/SettingsInput";
import { Flex, Text } from "@mantine/core";
import { IconChevronRight } from "@tabler/icons-react";
import { useState } from "react";
import animationData from './users.json';
import Lottie from "lottie-react";
import { AnimatedButton } from "@/app/components/AnimatedButton/AnimatedButton";
import { useGroups } from "@/app/providers/DialogProvider/useGroups";

export function CreateGroup() {
    const [title, setTitle] = useState<string>("");
    const [description, setDescription] = useState<string>("");
    const {createGroup, loading} = useGroups();

    return (
        <>
            <Breadcrumbs text="Create group"></Breadcrumbs>
            <InternalScreen>
                <Flex align={'center'} direction={'column'} justify={'center'} gap={8} mb={'md'}>
                    <Lottie
                        style={{ width: 80, height: 80 }}
                        animationData={animationData}
                        loop={true}
                    ></Lottie>
                    <Text fz={20} fw={600}>
                        Create group chat
                    </Text>
                </Flex>
                <SettingsInput.Default
                    hit="Group title"
                    placeholder="ex. Family Chat"
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                ></SettingsInput.Default>
                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                    Group title, e.g., "Family Chat", helps members identify the group easily. <strong>Title cannot be changed after creation.</strong>
                </Text>
                <SettingsInput.Default
                    hit="Description"
                    mt={'sm'}
                    value={description}
                    placeholder="ex. A group for family members"
                    onChange={(e) => setDescription(e.target.value)}
                ></SettingsInput.Default>
                <Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
                    Group description, e.g., "A group for family members", helps members understand the purpose of the group. Not required.
                </Text>
                <AnimatedButton rightSection={
                    <IconChevronRight size={14}></IconChevronRight>
                } mt={'lg'} fullWidth animated={[
                    '#0078ff',
                    '#2ea6ff'
                ]} onClick={() => createGroup(title, description)} loading={loading}>Create</AnimatedButton>
            </InternalScreen>
        </>
    );
}