/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
import styled from 'styled-components';
import { ToggleButtonGroupProps, ToggleButtonGroup } from '@material-ui/lab';
import { ThemeObject } from '../Theme';
import { getColor } from '../utils';

export const StyleToggleButton = styled(
  (
    props: ToggleButtonGroupProps & {
      $theme: ThemeObject;
      $textColor: keyof ThemeObject['pallet'];
      $backgroundColor: keyof ThemeObject['pallet'];
      $borderColor?: keyof ThemeObject['pallet'];
      $textColorSelected: keyof ThemeObject['pallet'];
      $backgroundColorSelected: keyof ThemeObject['pallet'];
      $isOpacityBackgroundColorSelected: boolean;
      $borderColorSelected?: keyof ThemeObject['pallet'];
    }
  ) => <ToggleButtonGroup {...props} exclusive />
)`
  && {
    .MuiToggleButton-root.Mui-selected {
      color: ${(props) => props.$theme.pallet[props.$textColorSelected]};
      background-color: ${(props) =>
        getColor(props.$theme, props.$backgroundColorSelected, props.$isOpacityBackgroundColorSelected)};
      border-color: ${(props) => (props.$borderColorSelected ? props.$theme.pallet[props.$borderColorSelected] : 'none')};
    }
    .MuiToggleButton-root:not(.Mui-selected) {
      color: ${(props) => props.$theme.pallet[props.$textColor]};
      background-color: ${(props) => props.$theme.pallet[props.$backgroundColor]};
      border-color: ${(props) => (props.$borderColor ? props.$theme.pallet[props.$borderColor] : 'none')};
    }
  }
`;
