import {styled} from '@mui/material/styles';
import {CheckboxSizeStyle as sizes} from './checkbox-size.style';
import {ICheckboxFrame} from '../checkbox.type';

const Checkbox = styled('input')`
    opacity: 0;
    position: absolute;
    /* &.Mui-focusVisible {
        border-color: ${({theme}) => theme.palette.primary[300]};
        background-color: ${({theme}) => theme.palette.white};
        box-shadow: 0px 0px 0px 4px ${({theme}) => theme.palette.primary[100]};
    }

    &.Mui-checked,
    &.MuiCheckbox-indeterminate {
    }

    &.Mui-disabled {
        background-color: ${({theme}) => theme.palette.gray[100]};
        border-color: ${({theme}) => theme.palette.border[300]};
        color: ${({theme}) => theme.palette.border[300]};
    } */
`;

const CheckboxFrame = styled('div')<ICheckboxFrame>`
    border: 1px solid ${({theme}) => theme.palette.border[300]};
    background-color: ${({theme}) => theme.palette.white};
    ${({size}) => sizes[size || 'medium']};
    padding: 0;
    display: flex;
    transition: 0.3s;
    align-items: center;
    position: relative;
    justify-content: center;

    &:hover {
        background-color: ${({theme, color}) =>
            theme.palette[color || 'primary'][100]};
        border-color: ${({theme, color}) =>
            theme.palette[color || 'primary'][600]};
    }

    &.checked {
        background-color: ${({theme, color}) =>
            theme.palette[color || 'primary'][600]};
        border-color: ${({theme, color}) =>
            theme.palette[color || 'primary'][600]};
        color: ${({theme}) => theme.palette.white};
    }

    &.disabled {
        background-color: ${({theme}) => theme.palette.gray[100]};
        border-color: ${({theme}) => theme.palette.gray[300]};
        color: ${({theme}) => theme.palette.gray[300]};
    }
`;

const Container = styled('div')`
    display: flex;
    align-items: flex-start;
`;

const Content = styled('div')`
    margin-inline-start: 8px;
`;

const Title = styled('span')`
    color: ${({theme}) => theme.palette.typography[700]};
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    cursor: default;
`;

const Description = styled('span')`
    color: ${({theme}) => theme.palette.typography[500]};
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    user-select: none;
    cursor: default;
`;

export const CheckboxStyle = {
    Checkbox,
    Container,
    Content,
    Title,
    Description,
    CheckboxFrame,
};