import styled from "styled-components";
import type { CanvasHandlerProps } from "./handler/interfaces";
import { useImages } from "./use/use-images";
import { NumericInputWithLabelTable } from "./components/numeric-labeld-input";
import { SvgTracerOptions } from "./components/svg-tracer-options";
import { PaperSizeSelector } from "./components/paper-size-selector";
import { useSettings } from "./use/use-settings";
import { PaperOrientation } from "./components/paper-orentation";
import { PaperGuideSelector } from "./components/paper-guide-selector";
import { ImportExportButtons } from "./components/download-buttons";


const Bar = styled.div`
    width: 100%;
    overflow: auto;
    height: 125px;
    background-color: var(--primary-color);
    display: flex;
    flex-direction: row;
`;

const ImageBox = styled.table`
    margin: 2px;
    padding-right: 4px;
`;

const SvgOption = styled.div`
    margin: 2px;
    padding-right: 4px;
`;
const Line = styled.div`
    margin: 4px;
    height: calc(100% - 8px);
    border-right: 1px solid white;
`;



type NumericKeys<T> = {
    [K in keyof T]: T[K] extends number ? K : never
}[keyof T]

function getNumericValue<T>(selected: T[], key: NumericKeys<T>): number {
    const disabled = selected.length === 0;
    const isMixed = selected.length > 1;

    return disabled
        ? 0
        : isMixed
            ? selected.reduce((acc, e) => acc + (e[key] as number), 0) / selected.length
            : (selected[0][key] as number);
}

export function NavBar({ handler }: CanvasHandlerProps) {
    const { selected } = useImages(handler);
    const { settings, setSettings } = useSettings(handler);

    const setValue = (key: string, value: any) => {
        selected.forEach((e) => {
            e.onPropsChange({
                [key]: value
            });
        });
    };
    const style: React.CSSProperties = {
        opacity: selected.length ? 1 : 0.2,
        pointerEvents: selected.length ? "all" : "none"
    };

    return (
        <Bar>
            <PaperSizeSelector settings={settings} setSettings={setSettings} popup={handler.popup} />
            <PaperOrientation settings={settings} setSettings={setSettings} />
            <PaperGuideSelector settings={settings} setSettings={setSettings} />
            <ImageBox style={style}>
                <tbody>
                    <NumericInputWithLabelTable
                        name="Size"
                        value={getNumericValue(selected, "scale")}
                        onChange={value => setValue("scale", value)}
                    />
                    <NumericInputWithLabelTable
                        name="X"
                        value={getNumericValue(selected, "x")}
                        onChange={value => setValue("x", value)}
                    />
                    <NumericInputWithLabelTable
                        name="Y"
                        value={getNumericValue(selected, "y")}
                        onChange={value => setValue("y", value)}
                    />
                </tbody>
            </ImageBox>
            <SvgOption style={style}>
                <SvgTracerOptions selected={selected} handler={handler} />
            </SvgOption>
            <Line />
            <ImportExportButtons handler={handler} selected={selected} />
            {/* <RibbonButton icon={() => <FaTrash />} name="Delete" onClick={async () => {
                if (await handler.popup.confirm("Delete project", "Are you sure you want to delete this project?")) {
                    handler.clear();
                    handler.promptSetName();
                }
            }} />
            <RibbonButton icon={() => <FaDownload />} name="Export" onClick={async () => {
                handler.exportProject();
            }} />

            <RibbonButton icon={() => <FaFileImport />} name="Import" onClick={async () => {
                handler.importProject();
            }} /> */}


        </Bar>
    );
}