import {Setting, useSettingsStore} from "../../store/settingsStore";
import {ChangeEvent} from "react";
import styled, {useTheme} from "styled-components";
import {IconComponent} from "../../const/buttons/icons";
import {buttonNames} from "../../const/buttons/names";
import SettingSelect from "./SettingSelect";
import {MainButton} from "../UI/buttons/mainButton";

const SettingBlock = styled.div`
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 18px;
    font-size: 18px;
    width: 90%;
    input{
        font-size: 16px;
        outline: none;
        background-color: ${props => props.theme.primary};
        border: 1px solid ${props => props.theme.borderColor};
        padding: 6px 8px;
        border-radius: 4px;
    }
    input[type="number"]{
        width: 80px;
    }
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
`
const StyledCheckbox = styled.input.attrs({ type: 'checkbox' })`
    width: 22px !important;
    height: 22px !important;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    cursor: pointer;
    overflow: hidden;
  
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: ${props => props.theme.primary};
    top: 0;
    left: 0;
  }
  &:checked::after {
    background: ${props => props.theme.accent};
  }

`;
const LabelCheckbox = styled.label`
    position: relative;
    cursor: pointer;
    padding: 0;
    svg{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
`


export const SettingItem = ({ setting }: { setting: Setting }) => {
    const { updateSetting } = useSettingsStore();
    const theme = useTheme();

    const handleChange = (
        e: ChangeEvent<HTMLInputElement | HTMLSelectElement>
    ) => {
        const value =
            setting.type === 'boolean'
                ? (e.target as HTMLInputElement).checked
                : e.target.value;
        updateSetting(setting.id, value);
    };

    return (
        <SettingBlock>
            <label>{setting.label}</label>

            {setting.type === 'boolean' && (
                <LabelCheckbox>
                    <StyledCheckbox />
                    <IconComponent name={buttonNames[19]} width="18" height="18" setColor={theme.primary} />
                </LabelCheckbox>
            )}

            {setting.type === 'select' && setting.options && (
                <SettingSelect
                    value={setting.value}
                    options={setting.options}
                    onChange={(value) => updateSetting(setting.id, value)}
                />
            )}

            {setting.type === 'text' && (
                <input
                    type="text"
                    value={setting.value}
                    onChange={handleChange}
                />
            )}

            {setting.type === 'number' && (
                <input
                    type="number"
                    min={setting?.min}
                    max={setting?.max}
                    value={setting.value}
                    onChange={handleChange}
                />
            )}

            {setting.type === 'button' && (
                <MainButton
                    type="button"
                    size="small"
                    title={setting.value}
                />
            )}
        </SettingBlock>
    );
};