import { Button, Modal, Surface, Typography } from "@heroui/react";
import type { Dispatch, SetStateAction } from "react";
import { AgentInfo, WeaponInfo } from "~/types/skin";
import { Float } from "./float";

export function SkinDialog({
    isOpen,
    setIsOpen,
    skin,
}: {
    isOpen: boolean;
    setIsOpen: Dispatch<SetStateAction<boolean>>;
    skin: WeaponInfo | AgentInfo;
}) {
    const acolor = `${skin.color}64`;
    return (
        <Modal isOpen={isOpen}>
            <Modal.Backdrop
                variant="blur"
                shouldCloseOnInteractOutside={(_element) => {
                    setIsOpen(false);
                    return true;
                }}
            >
                <Modal.Container size="lg">
                    <Modal.Dialog>
                        <Modal.CloseTrigger
                            onPress={() => {
                                setIsOpen(false);
                            }}
                        />
                        <Modal.Body>
                            <div className="flex flex-col gap-2">
                                <Typography.Heading
                                    level={4}
                                    className="py-1 text-wrap"
                                >
                                    {skin.display}
                                </Typography.Heading>
                                <Button className="bg-mist-700 flex flex-col h-full p-0 rounded-none gap-0 hover:bg-indigo-800 active:bg-indigo-900">
                                    <div className="flex flex-col w-full h-full">
                                        <div
                                            className="bg-linear-to-b pointer-events-none w-full h-full relative"
                                            style={{
                                                background: `linear-gradient(to bottom, #1f2937, ${acolor})`,
                                            }}
                                        >
                                            <img
                                                src={`/skins/${skin.name}_${skin instanceof WeaponInfo ? skin.paint_index : 0}.png`}
                                                className="pointer-events-none object-contain object-bottom h-full"
                                                alt="Weapon image"
                                            />
                                            <Surface className="rounded-full w-fit h-fit p-2 absolute bottom-2 right-2" variant="secondary">
                                                <svg
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    fill="none"
                                                    viewBox="0 0 24 24"
                                                    strokeWidth={1.5}
                                                    stroke="currentColor"
                                                    className="size-6 m-0"
                                                >
                                                    <path
                                                        strokeLinecap="round"
                                                        strokeLinejoin="round"
                                                        d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
                                                    />
                                                </svg>
                                            </Surface>
                                        </div>
                                        <div
                                            className={`h-1 w-full`}
                                            style={{
                                                background: `${skin.color}`,
                                            }}
                                        ></div>
                                    </div>
                                </Button>
                                {skin instanceof WeaponInfo && (
                                    <>
                                        <Typography.Paragraph>
                                            Float: {skin.float}
                                        </Typography.Paragraph>
                                        <Float float={skin.float} />
                                    </>
                                )}
                                {skin instanceof WeaponInfo && (
                                    <Typography.Paragraph>
                                        Pattern: {skin.pattern}
                                    </Typography.Paragraph>
                                )}
                                <Typography.Code>
                                    Transaction id: {skin.id}
                                </Typography.Code>
                            </div>
                        </Modal.Body>
                    </Modal.Dialog>
                </Modal.Container>
            </Modal.Backdrop>
        </Modal>
    );
}