import { styled } from "styled-components";
import type { CanvasHandlerProps } from "../handler/interfaces";
import { Icon2525 } from "../styles";
import { FaMinus, FaPlus } from "react-icons/fa6";
import { useSettings } from "../use/use-settings";
import { clamp } from "lodash";
import { useEffect, useState } from "react";

const Wrapper = styled.div`
    display: flex;
    flex-direction: row;
    background-color: var(--primary-color);
    border-top: 1px solid var(--secondary-color);
`;

const ScaleText = styled.span`
    width: 50px;
    margin-top: 4px;
    text-align: center;
`;

const ProjectName = styled.span`
    margin: auto;
`;

const DPI = [72, 96, 150, 300, 600];

export function InfoBar({ handler }: CanvasHandlerProps) {
    const { settings, setSettings } = useSettings(handler);
    const [projectName, setProjectName] = useState(handler.projectName);

    useEffect(() => {
        return handler.emitter.on("name", (name) => {
            setProjectName(name);
        });
    }, [handler.projectName]);

    const setScale = (increment: boolean) => {
        const amount = 0.05;
        setSettings({ scale: settings.scale + (increment ? amount : -amount) });
    };
    const setDPI = (increment: boolean) => {
        let index = DPI.indexOf(settings.DPI);

        if (index === -1) {
            index = DPI.reduce((bestIdx, value, i) => {
                const bestDiff = Math.abs(DPI[bestIdx] - settings.DPI);
                const currentDiff = Math.abs(value - settings.DPI);
                return currentDiff < bestDiff ? i : bestIdx;
            }, 0);
        }

        if (increment) {
            if (index + 1 < DPI.length) index++;
        } else {
            if (index - 1 >= 0) index--;
        }

        setSettings({ DPI: DPI[index] });
    };

    return (
        <Wrapper>
            <Icon2525 onClick={() => setScale(false)}>
                <FaMinus />
            </Icon2525>
            <ScaleText
                onClick={async () => {
                    const number = await handler.popup.prompt("DPI", "Enter your desired DPI", (settings.scale * 100).toString());
                    if (number) {
                        const int = parseInt(number, 10) / 100;
                        if (!isNaN(int)) {
                            setSettings({ scale: clamp(int, 0, 100) });
                        }
                    }
                }}
            >
                {Math.round(settings.scale * 100)}%
            </ScaleText>
            <Icon2525 onClick={() => setScale(true)}>
                <FaPlus />
            </Icon2525>
            <ProjectName>
                <span
                    onClick={() => {
                        handler.promptSetName();
                    }}
                >
                    {" "}
                    {projectName}
                </span>
            </ProjectName>
            <Icon2525 onClick={() => setDPI(false)}>
                <FaMinus />
            </Icon2525>
            <ScaleText
                onClick={async () => {
                    const number = await handler.popup.prompt("DPI", "Enter your desired DPI", settings.DPI.toString());
                    if (number) {
                        const int = parseInt(number, 10);
                        if (!isNaN(int)) {
                            setSettings({ DPI: clamp(int, DPI[0], DPI[DPI.length - 1]) });
                        }
                    }
                }}
            >
                {Math.round(settings.DPI)}DPI
            </ScaleText>
            <Icon2525 onClick={() => setDPI(true)}>
                <FaPlus />
            </Icon2525>
        </Wrapper>
    );
}