import { lighten } from 'polished';
import styled from 'styled-components';
import { ThemeDefault } from '../../types/theme.interface';

const css = styled.div;

export default css<any>`
   .btn-group {
      display: block;
      ${(props) => props.fullLine && `display: flex !important;`}
      ${(props) => props.oneLine && `overflow-y: scroll; display: flex;`}
   }
`;

export const ButtonStyle = css<any>`
   font-weight: 500;
   background: #eee;
   margin-left: 0px !important;
   padding: 5px 13px;
   border: none;

   ${(p) => !!p.disabled && 'opacity: 0.9;'}
   ${(props) => props.variant === 'light' && `background: white;`}

   ${(props) => props.fullLine && `flex: 1;`}
   ${(props) => props.startRounded && `border-top-left-radius: 100px; border-bottom-left-radius: 100px;`}
   ${(props) => props.endRounded && `border-top-right-radius: 100px; border-bottom-right-radius: 100px;`}
   ${(props) => props.separate && `margin-right: 5px; margin-bottom: 5px;`}

   // outline
   ${(props) => !props.active && props.outline && `background: white;`}
   ${(props) => props.outline && `border-top: 2px solid; border-bottom: 2px solid; border-left: 2px solid;`}
   ${(props) => props.outline && props.endBtn && `border-right: 2px solid;`}
   ${(props) =>
      (!props.variant || props.variant === 'primary') &&
      `border-color: ${props.defaultColor || props.theme.primary || ThemeDefault.primary};`}
   ${(props) => props.variant === 'secondary' && `border-color: ${props.theme.secondary || ThemeDefault.secondary};`}
   ${(props) => props.variant === 'success' && `border-color: ${props.theme.success || ThemeDefault.success};`}
   ${(props) => props.variant === 'info' && `border-color: ${props.theme.info || ThemeDefault.info};`}
   ${(props) => props.variant === 'warning' && `border-color: ${props.theme.warning || ThemeDefault.warning};`}
   ${(props) => props.variant === 'danger' && `border-color: ${props.theme.danger || ThemeDefault.danger};`}
   ${(props) => props.variant === 'light' && `border-color: ${props.theme.light || ThemeDefault.light};`}
   ${(props) => props.variant === 'dark' && `border-color: ${props.theme.dark || ThemeDefault.dark};`}
   
   // rounded
   ${(props) => props.rounded && `border-radius: 100px !important;`}
   
   // background color
   ${(props) =>
      props.active &&
      (!props.variant || props.variant === 'primary') &&
      `background: ${props.defaultColor || props.theme.primary || ThemeDefault.primary};`}
   ${(props) =>
      props.active &&
      props.variant === 'secondary' &&
      `background: ${props.theme.secondary || ThemeDefault.secondary};`}
   ${(props) =>
      props.active && props.variant === 'success' && `background: ${props.theme.success || ThemeDefault.success};`}
   ${(props) => props.active && props.variant === 'info' && `background: ${props.theme.info || ThemeDefault.info};`}
   ${(props) =>
      props.active && props.variant === 'warning' && `background: ${props.theme.warning || ThemeDefault.warning};`}
   ${(props) =>
      props.active && props.variant === 'danger' && `background: ${props.theme.danger || ThemeDefault.danger};`}
   ${(props) => props.active && props.variant === 'light' && `background: ${props.theme.light || ThemeDefault.light};`}
   ${(props) => props.active && props.variant === 'dark' && `background: ${props.theme.dark || ThemeDefault.dark};`}
   
   // size
  ${(props) => props.size === 'sm' && `padding: 5px;`}
  ${(props) => props.size === 'lg' && `padding: 12px;`}
   
   // text color
   ${(props) =>
      props.outline &&
      props.variant === 'primary' &&
      `color: ${props.defaultColor || props.theme.primary || ThemeDefault.primary};`}
   ${(props) =>
      props.outline && props.variant === 'secondary' && `color: ${props.theme.secondary || ThemeDefault.secondary};`}
   ${(props) =>
      props.outline && props.variant === 'success' && `color: ${props.theme.success || ThemeDefault.success};`}
   ${(props) => props.outline && props.variant === 'info' && `color: ${props.theme.info || ThemeDefault.info};`}
   ${(props) =>
      props.outline && props.variant === 'warning' && `color: ${props.theme.warning || ThemeDefault.warning};`}
   ${(props) => props.outline && props.variant === 'danger' && `color: ${props.theme.danger || ThemeDefault.danger};`}
   ${(props) => props.outline && props.variant === 'light' && `color: ${props.theme.light || ThemeDefault.light};`}
   ${(props) => props.outline && props.variant === 'dark' && `color: ${props.theme.dark || ThemeDefault.dark};`}

   ${(props) => props.background && !props.outline && `background-color: ${props.background};`}
   ${(props) => props.background && props.outline && `color: ${props.background}; border-color: ${props.background};`}
   
   // color text active
   ${(props) =>
      props.active &&
      (!props.variant || props.variant === 'primary') &&
      `color: ${props.theme.primaryTextInside || ThemeDefault.primaryTextInside};`}
   ${(props) =>
      props.active &&
      props.variant === 'secondary' &&
      `color: ${props.theme.secondaryTextInside || ThemeDefault.secondaryTextInside};`}
   ${(props) =>
      props.active &&
      props.variant === 'success' &&
      `color: ${props.theme.successTextInside || ThemeDefault.successTextInside};`}
   ${(props) =>
      props.active &&
      props.variant === 'info' &&
      `color: ${props.theme.infoTextInside || ThemeDefault.infoTextInside};`}
   ${(props) =>
      props.active &&
      props.variant === 'warning' &&
      `color: ${props.theme.warningTextInside || ThemeDefault.warningTextInside};`}
   ${(props) =>
      props.active &&
      props.variant === 'danger' &&
      `color: ${props.theme.dangerTextInside || ThemeDefault.dangerTextInside};`}
   ${(props) =>
      props.active &&
      props.variant === 'light' &&
      `color: ${props.theme.lightTextInside || ThemeDefault.lightTextInside};`}
   ${(props) =>
      props.active &&
      props.variant === 'dark' &&
      `color: ${props.theme.darkTextInside || ThemeDefault.darkTextInside};`}
   
   // color text inactive
   ${(props) =>
      !props.active &&
      props.outline &&
      (!props.variant || props.variant === 'primary') &&
      `color: ${props.defaultColor || props.theme.primary || ThemeDefault.primary};`}
   ${(props) =>
      !props.active &&
      props.outline &&
      props.variant === 'secondary' &&
      `color: ${props.theme.secondary || ThemeDefault.secondary};`}
   ${(props) =>
      !props.active &&
      props.outline &&
      props.variant === 'success' &&
      `color: ${props.theme.success || ThemeDefault.success};`}
   ${(props) =>
      !props.active && props.outline && props.variant === 'info' && `color: ${props.theme.info || ThemeDefault.info};`}
   ${(props) =>
      !props.active &&
      props.outline &&
      props.variant === 'warning' &&
      `color: ${props.theme.warning || ThemeDefault.warning};`}
   ${(props) =>
      !props.active &&
      props.outline &&
      props.variant === 'danger' &&
      `color: ${props.theme.danger || ThemeDefault.danger};`}
   ${(props) =>
      !props.active &&
      props.outline &&
      props.variant === 'light' &&
      `color: ${props.theme.light || ThemeDefault.light};`}
   ${(props) =>
      !props.active && props.outline && props.variant === 'dark' && `color: ${props.theme.dark || ThemeDefault.dark};`}

   ${(props) =>
      !props.disabled &&
      `
      &:hover {
         // background color
         ${
            (!props.variant || props.variant === 'primary') &&
            `background: ${lighten(0.1, props.defaultColor || props.theme.primary || ThemeDefault.primary)};`
         }
         ${
            props.variant === 'secondary' &&
            `background: ${lighten(0.1, props.theme.secondary || ThemeDefault.secondary)};`
         }
         ${props.variant === 'success' && `background: ${lighten(0.1, props.theme.success || ThemeDefault.success)};`}
         ${props.variant === 'info' && `background: ${lighten(0.1, props.theme.info || ThemeDefault.info)};`}
         ${props.variant === 'warning' && `background: ${lighten(0.1, props.theme.warning || ThemeDefault.warning)};`}
         ${props.variant === 'danger' && `background: ${lighten(0.1, props.theme.danger || ThemeDefault.danger)};`}
         ${props.variant === 'light' && `background: ${lighten(0.1, props.theme.light || ThemeDefault.light)};`}
         ${props.variant === 'dark' && `background: ${lighten(0.1, props.theme.dark || ThemeDefault.dark)};`}
            
         // text color
         ${
            (!props.variant || props.variant === 'primary') &&
            `color: ${props.theme.primaryTextInside || ThemeDefault.primaryTextInside};`
         }
         ${
            props.variant === 'secondary' &&
            `color: ${props.theme.secondaryTextInside || ThemeDefault.secondaryTextInside};`
         }
         ${props.variant === 'success' && `color: ${props.theme.successTextInside || ThemeDefault.successTextInside};`}
         ${props.variant === 'info' && `color: ${props.theme.infoTextInside || ThemeDefault.infoTextInside};`}
         ${props.variant === 'warning' && `color: ${props.theme.warningTextInside || ThemeDefault.warningTextInside};`}
         ${props.variant === 'danger' && `color: ${props.theme.dangerTextInside || ThemeDefault.dangerTextInside};`}
         ${props.variant === 'light' && `color: ${props.theme.lightTextInside || ThemeDefault.lightTextInside};`}
         ${props.variant === 'dark' && `color: ${props.theme.darkTextInside || ThemeDefault.darkTextInside};`}
      }
   `}

   ${(p) => !!p.disabled && 'cursor: not-allowed !important;'}
`;
