import { Dropzone, DropzoneProps, FileWithPath, MIME_TYPES } from "@mantine/dropzone";
import { FC } from "react";
import { Fieldset, Flex, Group, Loader, rem, Text } from "@mantine/core";
import { IconFileExcel, IconUpload, IconX } from "@tabler/icons-react";
import UseExcelDropzone from "../../types/UseExcelDropzone.tsx";

interface RestProps {
    dropzone: UseExcelDropzone;
    onDrop: (files: FileWithPath[]) => void;
}

type Props = RestProps & Omit<DropzoneProps, "onDrop">;

const ExcelDropzone: FC<Props> = (props: Props) => {
    const { isLoading } = props.dropzone;

    const getBody = () => {
        return (
            <Dropzone
                {...props}
                accept={[
                    MIME_TYPES.xlsx,
                ]}
                multiple={false}
                onDrop={props.onDrop}>
                <Group
                    justify="center"
                    gap="xl"
                    style={{ pointerEvents: "none" }}>
                    <Dropzone.Accept>
                        <IconUpload
                            style={{
                                width: rem(52),
                                height: rem(52),
                                color: "var(--mantine-color-blue-6)",
                            }}
                            stroke={1.5}
                        />
                    </Dropzone.Accept>
                    <Dropzone.Reject>
                        <IconX
                            style={{
                                width: rem(52),
                                height: rem(52),
                                color: "var(--mantine-color-red-6)",
                            }}
                            stroke={1.5}
                        />
                    </Dropzone.Reject>
                    <Dropzone.Idle>
                        <IconFileExcel
                            style={{
                                width: rem(52),
                                height: rem(52),
                                color: "var(--mantine-color-dimmed)",
                            }}
                            stroke={1.5}
                        />
                    </Dropzone.Idle>

                    <div style={{ textAlign: "center" }}>
                        <Text
                            size="xl"
                            inline>
                            Перенесите или нажмите чтоб выбрать файл формата xlsx
                        </Text>
                    </div>
                </Group>
            </Dropzone>
        );
    };

    return (
        <Flex
            gap={rem(10)}
            direction={"column"}>
            <Fieldset legend={"Файл"}>
                <Flex justify={"center"}>
                    {isLoading ? <Loader /> : getBody()}
                </Flex>
            </Fieldset>
        </Flex>
    );
};

export default ExcelDropzone;
