import {styled} from '@mui/material';
import {ButtonComponent} from '../../atoms/button';
import type {IExtendedButton, IContainer} from './button-group.type';

const Container = styled('div')<IContainer>`
    display: flex;
    justify-content: flex-start;
    direction: ${({theme}) => theme.direction};
    ${({disabled}) =>
        disabled &&
        `
        opacity: .4;
        pointer-events: none;
    `}
`;

const Button = styled(ButtonComponent)<IExtendedButton>`
    border-color: ${({theme, borderColor, color}) =>
        theme.palette[borderColor || color || 'gray'][300]};
    white-space: nowrap;
    &:first-of-type {
        ${({theme}) =>
            theme.direction === 'rtl'
                ? `
            border-left: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        `
                : `
            border-right: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        `}
    }
    &:last-of-type {
        ${({theme}) =>
            theme.direction === 'rtl'
                ? `
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        `
                : `
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        `}
    }
    &:not(:first-of-type):not(:last-of-type) {
        border-radius: 0;
        ${({theme, borderColor, color}) =>
            theme.direction === 'rtl'
                ? `
            border-left: 0;
            border-right: solid 1px
                ${theme.palette[borderColor || color || 'gray'][300]};
        `
                : `
            border-right: 0;
            border-left: solid 1px
                ${theme.palette[borderColor || color || 'gray'][300]};
        `}
    }
`;

export const ButtonGroupStyle = {
    Container,
    Button,
};