import {styled} from '@mui/material';
import {rgba} from 'polished';
import {
    IFormContainerContent,
    IFormContainerDescription,
} from './form-container.type';
import {themeDetector} from '../../../../helpers/theme-detector/theme-detector';

const Container = styled('div')<IFormContainerContent>`
    & > .focused {
        box-shadow:
            0px 0px 0px 4px
                ${({theme, error, color}) =>
                    theme.palette[themeDetector(error, color)][100]},
            0px 1px 2px 0px
                ${({theme}) => rgba(theme.palette.gray[900] as string, 0.5)};

        border-color: ${({theme, error, color}) =>
            theme.palette[themeDetector(error, color)][300]};
    }

    & > .error {
        border-color: ${({theme}) => theme.palette.error[300]};
    }

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

        border-color: ${({theme}) => theme.palette.border[300]};

        & .field {
            -webkit-text-fill-color: ${({theme}) =>
                theme.palette.typography[300]};
        }
    }
`;

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

const Label = styled('label')`
    color: ${({theme}) => theme.palette.typography[700]};
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    margin-bottom: 6px;
    display: inline-flex;
    cursor: default;
    user-select: none;
`;

const Description = styled('span')<IFormContainerDescription>`
    color: ${({theme, error}) =>
        theme.palette[error ? 'error' : 'typography'][500]};
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    margin-top: 6px;
`;

const Header = styled('div')`
    display: flex;
    gap: 4px;
`;

export const InputStyle = {
    Container,
    Wrapper,
    Label,
    Description,
    Header,
};