import { FC } from "react";
import { IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
import { omit } from "lodash";
import {
    Button,
    Fieldset,
    Flex,
    Group,
    Image,
    Loader,
    rem,
    Text,
} from "@mantine/core";
import { Dropzone, DropzoneProps, FileWithPath } from "@mantine/dropzone";
import UseImageDropzone from "./types";

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

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

const ImageDropzone: FC<Props> = (props: Props) => {
    const { showDropzone, setShowDropzone, isLoading, imageUrlInputProps } =
        props.imageDropzone;

    const restProps = omit(props, ["imageDropzone"]);

    const getDropzone = () => (
        <Dropzone
            {...restProps}
            accept={[
                "image/png",
                "image/jpeg",
                "image/gif",
                "image/bmp",
                "image/tiff",
                "image/x-icon",
                "image/webp",
                "image/svg+xml",
                "image/heic",
            ]}
            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>
                    <IconPhoto
                        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>
                        Перенесите изображение или нажмите чтоб выбрать файл
                    </Text>
                </div>
            </Group>
        </Dropzone>
    );

    const getBody = () => {
        if (imageUrlInputProps?.value && !showDropzone) {
            return <Image src={imageUrlInputProps.value} />;
        }
        return getDropzone();
    };

    return (
        <Flex
            gap={rem(10)}
            direction={"column"}>
            <Fieldset legend={"Изображение"}>
                <Flex justify={"center"}>
                    {isLoading ? <Loader /> : getBody()}
                </Flex>
            </Fieldset>
            {!showDropzone && (
                <Button
                    onClick={() => setShowDropzone(true)}
                    variant={"default"}>
                    Заменить изображение {}
                </Button>
            )}
        </Flex>
    );
};

export default ImageDropzone;
