import {css} from '@emotion/react';
import {Theme} from '@mui/material';
import {ButtonColorsType as Color} from '../button.type';

const contained = (theme: Theme, enteredColor: Color, disabled: boolean) => {
    const color = theme.palette[enteredColor || 'primary'];
    return css`
        background-color: ${color[600]};
        color: ${theme.palette.getContrastText(color[600] as string)};

        &:hover {
            background-color: ${color[700]};
        }

        &:focus {
            background-color: ${color[600]};
            box-shadow: 0 0 0 4px ${color[100]};
        }

        ${disabled
            ? css`
                  cursor: default;
                  background-color: ${theme.palette.grey[100]} !important;
                  color: ${theme.palette.grey[400]} !important;
              `
            : null}
    `;
};

const pale = (theme: Theme, enteredColor: Color, disabled: boolean) => {
    const color = theme.palette[enteredColor || 'primary'];
    return css`
        background-color: ${color[50]};
        color: ${color[700]};

        &:hover {
            background-color: ${color[100]};
            color: ${color[800]};
        }

        &:focus {
            background-color: ${color[50]};
            box-shadow: 0 0 0 4px ${color[100]};
        }

        ${disabled
            ? css`
                  cursor: default;
                  background-color: ${theme.palette.grey[100]} !important;
                  color: ${theme.palette.grey[400]} !important;
              `
            : null}
    `;
};

const text = (theme: Theme, enteredColor: Color, disabled: boolean) => {
    const color = theme.palette[enteredColor || 'primary'];
    return css`
        background-color: transparent;
        color: ${color[700]};

        &:hover {
            background-color: ${color[50]};
            color: ${color[800]};
        }

        &:focus {
            background-color: transparent;
            color: ${color[700]};
        }

        ${disabled
            ? css`
                  cursor: default;
                  background-color: transparent !important;
                  color: ${theme.palette.grey[400]} !important;
              `
            : null}
    `;
};

const link = (theme: Theme, enteredColor: Color, disabled: boolean) => {
    const color = theme.palette[enteredColor || 'primary'];
    return css`
        padding: 0;
        background-color: transparent;
        color: ${color[700]};

        &:hover {
            color: ${color[800]};
        }

        &:focus {
            background-color: transparent;
            color: ${color[700]};
        }

        ${disabled
            ? css`
                  cursor: default;
                  color: ${theme.palette.grey[400]} !important;
              `
            : null}
    `;
};

const outlined = (theme: Theme, enteredColor: Color, disabled: boolean) => {
    const color = theme.palette[enteredColor || 'primary'];
    return css`
        background-color: ${theme.palette.white};
        color: ${color[700]};
        border: 1px solid ${color[300]};

        &:hover {
            background-color: ${color[50]};
            color: ${color[800]};
        }

        &:focus {
            background-color: ${color[50]};
        }

        ${disabled
            ? css`
                  cursor: default;
                  border: 1px solid ${color[200]};
                  background-color: ${theme.palette.grey[100]} !important;
                  color: ${theme.palette.grey[400]} !important;
                  box-shadow: none !important;
              `
            : null}
    `;
};

export const ButtonVariantStyle = {
    contained,
    pale,
    text,
    link,
    outlined,
};