import SwitchMUI from '@mui/material/Switch';
import {styled} from '@mui/material/styles';
import {SwitchSizeStyle as sizes} from './switch-size.style';
import {ICustomSwitch} from '../switch.type';
import {themeDetector} from '../../../../../helpers/theme-detector/theme-detector';
import {rgba} from 'polished';
import {TypographyComponent} from '../../../atoms';

const Container = styled('div')`
    display: flex;
`;

const CustomSwitch = styled(SwitchMUI)<ICustomSwitch>`
    &.MuiSwitch-root {
        ${({size}) => sizes[size || 'md']['MuiSwitch-root']};
        padding: 0;
        overflow: visible;
    }

    &:hover {
        .MuiSwitch-track {
            background-color: ${({theme}) => theme.palette.gray[300]};
        }
    }

    & .MuiSwitch-switchBase {
        padding: 2px;

        &.Mui-checked {
            ${({size}) => sizes[size || 'md']['Mui-checked']};
            color: ${({theme}) => theme.palette.white};
        }
        &.Mui-checked + .MuiSwitch-track {
            opacity: 1;
            background-color: ${({theme, scheme}) =>
                theme.palette[themeDetector(false, scheme)][600]};
        }

        &:hover {
            background-color: transparent;
        }
    }

    & .MuiSwitch-thumb {
        ${({size}) => sizes[size || 'md']['MuiSwitch-thumb']};
        box-shadow: none;
        filter: ${({theme}) => `drop-shadow(0px 1px 2px ${rgba(
            theme.palette.shadow[500] as string,
            0.06,
        )}),
            drop-shadow(0px 1px 3px ${rgba(
                theme.palette.shadow[500] as string,
                0.01,
            )})`};
    }

    & .MuiSwitch-track {
        background-color: ${({theme}) => theme.palette.gray[200]};
        opacity: 1;
        border-radius: 20px;
    }

    & .Mui-disabled {
        &.Mui-checked {
            & + .MuiSwitch-track {
                background-color: ${({theme, scheme}) =>
                    theme.palette[themeDetector(false, scheme)][100]};
                opacity: 1;
            }
        }

        & + .MuiSwitch-track {
            background-color: ${({theme}) => theme.palette.gray[100]};
            opacity: 1;
        }

        & .MuiSwitch-thumb {
            filter: none;
            background-color: ${({theme}) => theme.palette.white};
        }
    }

    & .Mui-focusVisible {
        & + .MuiSwitch-track {
            box-shadow: 0px 0px 0px 4px
                ${({theme, scheme}) =>
                    theme.palette[themeDetector(false, scheme)][100]};
        }
    }

    & + .content {
        ${({size}) => sizes[size || 'md']['content']};

        & .title {
            ${({size}) => sizes[size || 'md']['title']};
        }

        & .hint {
            ${({size}) => sizes[size || 'md']['hint']};
        }
    }
`;

const Content = styled('div')`
    display: flex;
    flex-direction: column;
`;

const Title = styled(TypographyComponent)`
    color: ${({theme}) => theme.palette.typography[700]};
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
`;

const Hint = styled(TypographyComponent)`
    color: ${({theme}) => theme.palette.typography[500]};
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
`;

export const SwitchStyle = {
    Container,
    CustomSwitch,
    Content,
    Title,
    Hint,
};