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

const css = styled.button;

export const ButtonStyle = css<any>`
   color: white;
   font-weight: 500;

   // rounded
   ${(p) => p.rounded && `border-radius: 100px;`}
   ${(p) => p.w100 && `width: 100%;`}

   // background color
   ${(props) =>
      props.variant === 'primary' &&
      `background: ${props.defaultColor || props.theme.primary || ThemeDefault.primary};`}
   ${(props) => props.variant === 'secondary' && `background: ${props.theme.secondary || ThemeDefault.secondary};`}
   ${(props) => props.variant === 'success' && `background: ${props.theme.success || ThemeDefault.success};`}
   ${(props) => props.variant === 'info' && `background: ${props.theme.info || ThemeDefault.info};`}
   ${(props) => props.variant === 'warning' && `background: ${props.theme.warning || ThemeDefault.warning};`}
   ${(props) => props.variant === 'danger' && `background: ${props.theme.danger || ThemeDefault.danger};`}
   ${(props) => props.variant === 'light' && `background: ${props.theme.light || ThemeDefault.light};`}
   ${(props) => props.variant === 'dark' && `background: ${props.theme.dark || ThemeDefault.dark};`}
   ${(props) => props.variant === 'link' && `background: transparent;`}
   
   // outline
   ${(props) => props.outline && `border-width: 2px;`}
  ${(props) => props.outline && `background: transparent;`}
  ${(props) =>
      props.outline &&
      props.variant === 'primary' &&
      `border-color: ${props.defaultColor || props.theme.primary || ThemeDefault.primary};`}
  ${(props) =>
      props.outline &&
      props.variant === 'secondary' &&
      `border-color: ${props.theme.secondary || ThemeDefault.secondary};`}
  ${(props) =>
      props.outline && props.variant === 'success' && `border-color: ${props.theme.success || ThemeDefault.success};`}
  ${(props) => props.outline && props.variant === 'info' && `border-color: ${props.theme.info || ThemeDefault.info};`}
  ${(props) =>
      props.outline && props.variant === 'warning' && `border-color: ${props.theme.warning || ThemeDefault.warning};`}
  ${(props) =>
      props.outline && props.variant === 'danger' && `border-color: ${props.theme.danger || ThemeDefault.danger};`}
  ${(props) =>
      props.outline && props.variant === 'light' && `border-color: ${props.theme.light || ThemeDefault.light};`}
  ${(props) => props.outline && props.variant === 'dark' && `border-color: ${props.theme.dark || ThemeDefault.dark};`}
  ${(props) => props.variant === 'link' && `border-width: 0px;`}
  ${(props) => props.size === 'sm' && `padding: 5px;`}
  ${(props) => props.size === 'lg' && `padding: 12px;`}
   
   // text color with outline
   ${(props) => props.variant === 'light' && `color: ${props.theme.lightText || ThemeDefault.lightText};`}
   ${(props) => props.variant === 'link' && `color: ${props.theme.primary || ThemeDefault.primary};`}
   
   // text color
   ${(props) =>
      props.variant === 'primary' &&
      `color: ${props.defaultColor || props.theme.primaryTextInside || ThemeDefault.primaryTextInside};`}
   ${(props) =>
      props.variant === 'secondary' && `color: ${props.theme.secondaryTextInside || ThemeDefault.secondaryTextInside};`}
   ${(props) =>
      props.variant === 'success' && `color: ${props.theme.successTextInside || ThemeDefault.successTextInside};`}
   ${(props) => props.variant === 'info' && `color: ${props.theme.infoTextInside || ThemeDefault.infoTextInside};`}
   ${(props) =>
      props.variant === 'warning' && `color: ${props.theme.warningTextInside || ThemeDefault.warningTextInside};`}
   ${(props) =>
      props.variant === 'danger' && `color: ${props.theme.dangerTextInside || ThemeDefault.dangerTextInside};`}
   ${(props) => props.variant === 'light' && `color: ${props.theme.lightTextInside || ThemeDefault.lightTextInside};`}
   ${(props) => props.variant === 'dark' && `color: ${props.theme.darkTextInside || ThemeDefault.darkTextInside};`}
   
   // text color with outline
   ${(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};`}

   //
   ${(props) => props.textColor && `color: ${props.textColor};`}
   ${(props) => props.theme.button?.textColor && `color: ${props.theme.button?.textColor};`}

   transition: 0.15s all;

   &:hover {
      transition: 0.15s all;
      ${(props) => props.variant !== 'link' && `box-shadow: 0px 1px 5px rgb(0 0 0 / 30%);`}
      transform: translateZ(0) scale(1.02);

      ${(props) => props.variant === 'light' && `color: ${props.theme.lightText || ThemeDefault.lightText};`}
      ${(props) => props.variant === 'link' && `color: ${props.theme.primary || ThemeDefault.primary};`}
   
   // text color
   ${(props) =>
         props.variant === 'primary' &&
         `color: ${props.defaultColor || props.theme.primaryTextInside || ThemeDefault.primaryTextInside};`}
   ${(props) =>
         props.variant === 'secondary' &&
         `color: ${props.theme.secondaryTextInside || ThemeDefault.secondaryTextInside};`}
   ${(props) =>
         props.variant === 'success' && `color: ${props.theme.successTextInside || ThemeDefault.successTextInside};`}
   ${(props) => props.variant === 'info' && `color: ${props.theme.infoTextInside || ThemeDefault.infoTextInside};`}
   ${(props) =>
         props.variant === 'warning' && `color: ${props.theme.warningTextInside || ThemeDefault.warningTextInside};`}
   ${(props) =>
         props.variant === 'danger' && `color: ${props.theme.dangerTextInside || ThemeDefault.dangerTextInside};`}
   ${(props) => props.variant === 'light' && `color: ${props.theme.lightTextInside || ThemeDefault.lightTextInside};`}
   ${(props) => props.variant === 'dark' && `color: ${props.theme.darkTextInside || ThemeDefault.darkTextInside};`}
   
   // text color with outline
   ${(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};`}

   //
   ${(props) => props.textColor && `color: ${props.textColor};`}
   ${(props) => props.theme.button?.textColor && `color: ${props.theme.button?.textColor};`}
   }

   &:focus {
      box-shadow: none !important;
   }
`;
