import tw, { TwStyle } from 'twin.macro';

import {
  ButtonColor,
  ButtonSize,
  ButtonVariant,
  SelectSize,
  SelectVariant,
} from './types';

export const selectVariantStyle: Record<SelectVariant, TwStyle> = {
  default: tw`bg-white rounded-none`,
  minimal: tw`bg-transparent rounded`,
};

export const selectSizeStyle: Record<SelectSize, TwStyle> = {
  sm: tw`px-2 py-1`,
  md: tw`px-4 py-2`,
};

export const buttonVariantStyle: Record<ButtonVariant, TwStyle> = {
  primary: tw`px-3`,
  secondary: tw``,
};

export const buttonColorVariantStyle: Record<
  ButtonColor,
  Record<ButtonVariant, TwStyle>
> = {
  brand: {
    primary: tw`bg-brand hover:bg-indigo-600 active:bg-brand text-white`,
    secondary: tw`text-brand hover:text-indigo-600 active:text-indigo-900`,
  },

  product: {
    primary: tw`bg-product hover:bg-orange-500 active:bg-product text-black`,
    secondary: tw`text-black hover:text-opacity-70 active:text-opacity-80`,
  },

  plant: {
    primary: tw`bg-brand-plant hover:bg-green-600 active:bg-brand-plant text-white`,
    secondary: tw`text-brand-plant hover:text-green-700 active:text-green-900`,
  },
};

export const buttonRingStyle: Record<ButtonColor, TwStyle> = {
  brand: tw`focus:ring-indigo-300 hover:ring-indigo-200`,
  product: tw`focus:ring-orange-400 hover:ring-orange-300`,
  plant: tw`focus:ring-green-300 hover:ring-green-200`,
};

export const buttonSizeStyle: Record<ButtonSize, TwStyle> = {
  sm: tw`py-1 text-xs focus:ring-2`,
  md: tw`py-3 text-base focus:ring-4`,
};

export const buttonLinkSizeStyle: Record<ButtonSize, TwStyle> = {
  sm: tw`text-xs focus:ring-2`,
  md: tw`text-[18px] leading-6 md:(text-[22px] leading-8)`,
};

export const buttonLinkColorStyle: Record<ButtonColor, TwStyle> = {
  brand: tw`text-brand`,
  product: tw`text-brand-orange`,
  plant: tw`text-brand-plant`,
};