import styled from "styled-components";
import type { ImageEditor } from "../handler/image-editor";

const Wrapper = styled.div`
    display: block;
    padding: 5px;
`;

const Input = styled.input`
    width: 50px;
    height: 10px;
    background: #0d0d0d;
    border: 1px solid #444;
    border-top: none;
    color: #e0e0e0;
    font-size: 13px;
    padding: 10px 12px;
    outline: none;
    margin-top: 12px;

    &::placeholder {
        color: #555;
    }

    &:focus {
        border-color: #666;
    }
`;

export function ImagePropEditor({ propKey, selected }: { selected: ImageEditor[]; propKey: keyof ImageEditor }) {
    if (selected.length !== 1) return null;
    const item = selected[0];

    return (
        <Wrapper>
            <span>{propKey}: </span>
            <Input
                type="number"
                value={item[propKey] as number}
                onChange={(ev) => {
                    item.onPropsChange({ [propKey]: parseInt(ev.target.value, 10) });
                }}
            />
        </Wrapper>
    );
}