import styled from "styled-components";
import type { CanvasHandleImageEditorProps } from "../handler/interfaces";
import { FaEye, FaLock } from "react-icons/fa";
import { NamePlate } from "./layer-name";
import type { ImageEditor } from "../handler/image-editor";

const Item = styled.div<{ $selected: boolean }>`
    width: 240px;
    height: 30px;
    border: 1px solid var(--secondary-color);
    display: flex;
    flex-direction: row;

    ${({ $selected }) =>
        $selected &&
        `
        background-color: var(--secondary-color);
    `}
`;

const Img = styled.img`
    margin: 5px;
    max-width: 25px;
    max-height: 25px;
`;
const Icon = styled.span`
    padding: 7px 5px;
    cursor: pointer;
`;

export function LayerItem({ image, handler }: CanvasHandleImageEditorProps) {
    const selectLayer = (image: ImageEditor, ctrl: boolean) => {
        if (!ctrl) {
            const selected = handler.selected.filter((e) => e !== image.id);
            for (const sel of selected) {
                handler.setSelect(sel, false);
            }
        }
        image.toggleSelected();
    };
    return (
        <Item
            $selected={image.selected}
            onClick={(ev) => {
                ev.stopPropagation();
                ev.preventDefault();
                selectLayer(image, ev.ctrlKey);
            }}
        >
            <Icon
                style={{ opacity: image.visible ? 1 : 0.1 }}
                onClick={(ev) => {
                    ev.stopPropagation();
                    ev.preventDefault();
                    image.setVisible(!image.visible);
                }}
            >
                <FaEye />
            </Icon>

            <Img
                draggable="false"
                onClick={(ev) => {
                    ev.stopPropagation();
                    ev.preventDefault();
                    selectLayer(image, ev.ctrlKey);
                }}
                src={image.url}
                alt={image.id}
            />
            <NamePlate image={image} />
            <Icon
                style={{ opacity: image.locked ? 1 : 0.1 }}
                onClick={(ev) => {
                    ev.stopPropagation();
                    ev.preventDefault();
                    image.setLock(!image.locked);
                }}
            >
                <FaLock />
            </Icon>
        </Item>
    );
}