import { colord } from 'colord';
import styled from 'styled-components';
import { GetThemeVar } from '../../support/GetThemeVar';

const css = styled.button;

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

   // w100 = true
   ${(p) => p.w100 && `width: 100%;`}

   // background color
   background: ${(p) => GetThemeVar(p.theme, p.variant)};
   ${(p) => p.variant === 'link' && `background: transparent;`}
   ${(p) => p.defaultColor && `background: ${p.defaultColor};`}
   ${(p) => p.background && `background: ${p.background};`}
   
   // text color
   color: ${(p) => GetThemeVar(p.theme, `${p.variant}TextInside` as any)};
   ${(p) => p.variant === 'link' && `color: ${GetThemeVar(p.theme, 'primary')};`}
   ${(p) => p.defaultColor && `color: ${p.defaultColor};`}
   ${(p) => p.theme?.button?.textColor && `color: ${p.theme.button.textColor};`}
   
   &:hover {
      background: ${(p) => colord(GetThemeVar(p.theme, p.variant)).lighten(0.2).toHex()};
      ${(p) => p.variant === 'link' && `background: transparent;`}
      ${(p) => p.defaultColor && `background: ${colord(p.defaultColor).lighten(0.2).toHex()};`}
      ${(p) => p.background && `background: ${colord(p.background).lighten(0.2).toHex()};`}

      // text color
      color: ${(p) => GetThemeVar(p.theme, `${p.variant}TextInside` as any)};
      ${(p) => p.variant === 'link' && `color: ${GetThemeVar(p.theme, 'primary')};`}
      ${(p) => p.defaultColor && `color: ${p.defaultColor};`}
      ${(p) => p.theme?.button?.textColor && `color: ${p.theme.button.textColor};`}
   }

   &.outline {
      border-width: 2px;
      background: transparent;
      border-color: ${(p) => GetThemeVar(p.theme, p.variant)};
      ${(p) => p.variant === 'link' && `border-color: transparent;`}
      ${(p) => p.defaultColor && `border-color: ${p.defaultColor};`}
      color: ${(p) => GetThemeVar(p.theme, p.variant)};

      // background
      ${(p) => p.background && `color: ${p.background};`}
      ${(p) => p.background && `border-color: ${p.background};`}

      &:hover {
         color: ${(p) => colord(GetThemeVar(p.theme, p.variant)).lighten(0.2).toHex()};
         ${(p) => p.variant === 'link' && `color: ${colord(GetThemeVar(p.theme, 'primary')).lighten(0.2).toHex()};`}
         ${(p) => p.defaultColor && `color: ${colord(p.defaultColor).lighten(0.2).toHex()};`}
         ${(p) => p.background && `color: ${colord(p.color).lighten(0.2).toHex()};`}

         border-color: ${(p) => colord(GetThemeVar(p.theme, p.variant)).lighten(0.2).toHex()};
         ${(p) => p.variant === 'link' && `border-color: transparent;`}
         ${(p) => p.defaultColor && `border-color: ${colord(p.defaultColor).lighten(0.2).toHex()};`}
         ${(p) => p.background && `border-color: ${colord(p.background).lighten(0.2).toHex()};`}
      }
   }

   &.rounded {
      border-radius: 100px !important;
   }

   &.lg {
      padding: 12px;
   }

   &.sm {
      padding: 3px 5px;
      font-size: 0.9em;
   }
`;
