import {Theme, css, styled} from '@mui/material/styles';
import {rgba} from 'polished';
import {IDropdownControlContainer as IContainer} from './dropdown-control.type';
import type {IDropdownColorType} from '../../dropdown.type';

const focused = (theme: Theme, color: IDropdownColorType = 'primary') => css`
    box-shadow:
        0px 0px 0px 4px ${theme.palette[color][100]},
        0px 1px 2px 0px ${rgba(theme.palette.gray[900] as string, 0.5)};
    border-color: ${theme.palette[color][300]} !important;
`;

const Container = styled('div')<IContainer>`
    width: 100%;

    & > div {
        border-radius: 8px;
        color: ${({theme}) => theme.palette.typography[900]};
        box-shadow: 0px 1px 2px 0px
            ${({theme}) => rgba(theme.palette.shadow[500] as string, 0.05)};

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

        ${({isFocused, theme, color}) =>
            isFocused ? focused(theme, color) : ''}
    }
`;

const AdornmentContainer = styled('div')`
    margin-inline-start: 0.5rem;
`;

export const DropdownControlStyle = {
    Container,
    AdornmentContainer,
};