import { createStyle } from '@gluestack-style/react';

export const Button = createStyle({
  'borderRadius': '$sm',
  'backgroundColor': '$primary500',
  'flexDirection': 'row',
  'justifyContent': 'center',
  'alignItems': 'center',

  '_text': {
    color: '$textLight0',
    fontWeight: '$semibold',
    _dark: {
      color: '$textDark0',
    },
  },

  '_icon': {
    color: '$textLight0',
    _dark: {
      color: '$textDark0',
    },
  },

  '_spinner': {
    props: {
      color: '$backgroundLight0',
    },
    _dark: {
      props: {
        color: '$backgroundDark0',
      },
    },
  },

  'variants': {
    action: {
      primary: {
        'bg': '$primary500',
        'borderColor': '$primary300',

        ':hover': {
          bg: '$primary600',
          borderColor: '$primary400',
        },

        ':active': {
          bg: '$primary700',
          borderColor: '$primary700',
        },

        '_text': {
          'color': '$primary600',
          ':hover': {
            color: '$primary600',
          },
          ':active': {
            color: '$primary700',
          },
        },

        '_icon': {
          'color': '$primary600',
          ':hover': {
            color: '$primary600',
          },
          ':active': {
            color: '$primary700',
          },
        },

        '_spinner': {
          'props': {
            color: '$primary600',
          },
          ':hover': {
            props: {
              color: '$primary600',
            },
          },
          ':active': {
            props: {
              color: '$primary700',
            },
          },
        },

        '_dark': {
          'bg': '$primary400',
          'borderColor': '$primary700',
          ':hover': {
            bg: '$primary500',
            borderColor: '$primary400',
          },
          ':active': {
            bg: '$primary600',
            borderColor: '$primary300',
          },
          '_text': {
            'color': '$primary300',
            ':hover': {
              color: '$primary300',
            },
            ':active': {
              color: '$primary200',
            },
          },
          '_icon': {
            'color': '$primary300',
            ':hover': {
              color: '$primary300',
            },
            ':active': {
              color: '$primary200',
            },
          },
          '_spinner': {
            'props': { color: '$primary300' },
            ':hover': {
              props: { color: '$primary300' },
            },
            ':active': {
              props: { color: '$primary200' },
            },
          },

          ':focusVisible': {
            _web: {
              boxShadow: 'offset 0 0 0 2px $info400',
            },
          },
        },
      },
      secondary: {
        'bg': '$secondary500',
        'borderColor': '$secondary300',

        ':hover': {
          bg: '$secondary600',
          borderColor: '$secondary400',
        },

        ':active': {
          bg: '$secondary700',
          borderColor: '$secondary700',
        },

        '_text': {
          'color': '$secondary600',
          ':hover': {
            color: '$secondary600',
          },
          ':active': {
            color: '$secondary700',
          },
        },
        '_icon': {
          'color': '$secondary600',
          ':hover': {
            color: '$secondary600',
          },
          ':active': {
            color: '$secondary700',
          },
        },

        '_spinner': {
          'props': {
            color: '$secondary600',
          },
          ':hover': {
            props: { color: '$secondary600' },
          },
          ':active': {
            props: { color: '$secondary700' },
          },
        },

        '_dark': {
          'bg': '$secondary400',
          'borderColor': '$secondary700',
          ':hover': {
            bg: '$secondary500',
            borderColor: '$secondary400',
          },
          ':active': {
            bg: '$secondary600',
            borderColor: '$secondary300',
          },
          '_text': {
            'color': '$secondary300',
            ':hover': {
              color: '$secondary300',
            },
            ':active': {
              color: '$secondary200',
            },
          },
          '_icon': {
            'color': '$secondary300',
            ':hover': {
              color: '$secondary300',
            },
            ':active': {
              color: '$secondary200',
            },
          },
          '_spinner': {
            'props': {
              color: '$secondary300',
            },
            ':hover': {
              props: { color: '$secondary300' },
            },
            ':active': {
              props: { color: '$secondary200' },
            },
          },
        },
      },
      positive: {
        'bg': '$success500',
        'borderColor': '$success300',
        ':hover': {
          bg: '$success600',
          borderColor: '$success400',
        },

        ':active': {
          bg: '$success700',
          borderColor: '$success700',
        },

        '_text': {
          'color': '$success600',
          ':hover': {
            color: '$success600',
          },
          ':active': {
            color: '$success700',
          },
        },
        '_icon': {
          'color': '$success600',
          ':hover': {
            color: '$success600',
          },
          ':active': {
            color: '$success700',
          },
        },
        '_spinner': {
          'props': {
            color: '$success600',
          },
          ':hover': {
            props: { color: '$success600' },
          },
          ':active': {
            props: { color: '$success700' },
          },
        },
        '_dark': {
          'bg': '$success400',
          'borderColor': '$success700',
          ':hover': {
            bg: '$success500',
            borderColor: '$success400',
          },
          ':active': {
            bg: '$success600',
            borderColor: '$success300',
          },
          '_text': {
            'color': '$success300',
            ':hover': {
              color: '$success300',
            },
            ':active': {
              color: '$success200',
            },
          },
          '_icon': {
            'color': '$success300',
            ':hover': {
              color: '$success300',
            },
            ':active': {
              color: '$success200',
            },
          },
          '_spinner': {
            'props': {
              color: '$success300',
            },
            ':hover': {
              props: { color: '$success300' },
            },
            ':active': {
              props: { color: '$success200' },
            },
          },
          ':focusVisible': {
            _web: {
              boxShadow: 'offset 0 0 0 2px $info400',
            },
          },
        },
      },
      negative: {
        'bg': '$error500',
        'borderColor': '$error300',
        ':hover': {
          bg: '$error600',
          borderColor: '$error400',
        },

        ':active': {
          bg: '$error700',
          borderColor: '$error700',
        },
        '_text': {
          'color': '$error600',
          ':hover': {
            color: '$error600',
          },
          ':active': {
            color: '$error700',
          },
        },
        '_icon': {
          'color': '$error600',
          ':hover': {
            color: '$error600',
          },
          ':active': {
            color: '$error700',
          },
        },
        '_spinner': {
          'props': {
            color: '$error600',
          },
          ':hover': {
            props: { color: '$error600' },
          },
          ':active': {
            props: { color: '$error700' },
          },
        },
        '_dark': {
          'bg': '$error400',
          'borderColor': '$error700',
          ':hover': {
            bg: '$error500',
            borderColor: '$error400',
          },
          ':active': {
            bg: '$error600',
            borderColor: '$error300',
          },
          '_text': {
            'color': '$error300',
            ':hover': {
              color: '$error300',
            },
            ':active': {
              color: '$error200',
            },
          },
          '_icon': {
            'color': '$error300',
            ':hover': {
              color: '$error300',
            },
            ':active': {
              color: '$error200',
            },
          },
          '_spinner': {
            'props': {
              color: '$error300',
            },
            ':hover': {
              props: { color: '$error300' },
            },
            ':active': {
              props: { color: '$error200' },
            },
          },
          ':focusVisible': {
            _web: {
              boxShadow: 'offset 0 0 0 2px $info400',
            },
          },
        },
      },

      default: {
        'bg': '$transparent',
        ':hover': {
          bg: '$backgroundLight50',
        },
        ':active': {
          bg: 'transparent',
        },
        '_dark': {
          'bg': 'transparent',
          ':hover': {
            bg: '$backgroundDark900',
          },
          ':active': {
            bg: 'transparent',
          },
        },
      },
    },

    variant: {
      link: {
        'px': '$0',
        ':hover': {
          _text: {
            textDecorationLine: 'underline',
          },
        },
        ':active': {
          _text: {
            textDecorationLine: 'underline',
          },
        },
      },
      outline: {
        'bg': 'transparent',
        'borderWidth': '$1',
        ':hover': {
          bg: '$backgroundLight50',
        },
        ':active': {
          bg: 'transparent',
        },
        '_dark': {
          'bg': 'transparent',
          ':hover': {
            bg: '$backgroundDark900',
          },
          ':active': {
            bg: 'transparent',
          },
        },
      },
      solid: {
        _text: {
          'color': '$textLight0',
          ':hover': {
            color: '$textLight0',
          },
          ':active': {
            color: '$textLight0',
          },
        },
        _spinner: {
          'props': { color: '$textLight0' },
          ':hover': {
            props: { color: '$textLight0' },
          },
          ':active': {
            props: { color: '$textLight0' },
          },
        },
        _icon: {
          'props': { color: '$textLight0' },
          ':hover': {
            props: { color: '$textLight0' },
          },
          ':active': {
            props: { color: '$textLight0' },
          },
        },
        _dark: {
          _text: {
            'color': '$textDark0',
            ':hover': {
              color: '$textDark0',
            },
            ':active': {
              color: '$textDark0',
            },
          },
          _spinner: {
            'props': { color: '$textDark0' },
            ':hover': {
              props: { color: '$textDark0' },
            },
            ':active': {
              props: { color: '$textDark0' },
            },
          },
          _icon: {
            'props': { color: '$textDark0' },
            ':hover': {
              props: { color: '$textDark0' },
            },
            ':active': {
              props: { color: '$textDark0' },
            },
          },
        },
      },
    },

    size: {
      xs: {
        px: '$3.5',
        h: '$8',
        _icon: {
          props: {
            size: '2xs',
          },
        },
        _text: {
          props: {
            size: 'xs',
          },
        },
      },
      sm: {
        px: '$4',
        h: '$9',
        _icon: {
          props: {
            size: 'sm',
          },
        },
        _text: {
          props: {
            size: 'sm',
          },
        },
      },
      md: {
        px: '$5',
        h: '$10',
        _icon: {
          props: {
            size: 'md',
          },
        },
        _text: {
          props: {
            size: 'md',
          },
        },
      },
      lg: {
        px: '$6',
        h: '$11',
        _icon: {
          props: {
            size: 'md',
          },
        },
        _text: {
          props: {
            size: 'lg',
          },
        },
      },
      xl: {
        px: '$7',
        h: '$12',
        _icon: {
          props: {
            size: 'lg',
          },
        },
        _text: {
          props: {
            size: 'xl',
          },
        },
      },
    },
  },
  'compoundVariants': [
    {
      action: 'primary',
      variant: 'link',
      value: {
        'px': '$0',
        'bg': 'transparent',
        ':hover': {
          bg: 'transparent',
        },
        ':active': {
          bg: 'transparent',
        },
        '_dark': {
          'bg': 'transparent',
          ':hover': {
            bg: 'transparent',
          },
          ':active': {
            bg: 'transparent',
          },
        },
      },
    },
    {
      action: 'secondary',
      variant: 'link',
      value: {
        'px': '$0',
        'bg': 'transparent',
        ':hover': {
          bg: 'transparent',
        },
        ':active': {
          bg: 'transparent',
        },
        '_dark': {
          'bg': 'transparent',
          ':hover': {
            bg: 'transparent',
          },
          ':active': {
            bg: 'transparent',
          },
        },
      },
    },
    {
      action: 'positive',
      variant: 'link',
      value: {
        'px': '$0',
        'bg': 'transparent',
        ':hover': {
          bg: 'transparent',
        },
        ':active': {
          bg: 'transparent',
        },
        '_dark': {
          'bg': 'transparent',
          ':hover': {
            bg: 'transparent',
          },
          ':active': {
            bg: 'transparent',
          },
        },
      },
    },
    {
      action: 'negative',
      variant: 'link',
      value: {
        'px': '$0',
        'bg': 'transparent',
        ':hover': {
          bg: 'transparent',
        },
        ':active': {
          bg: 'transparent',
        },
        '_dark': {
          'bg': 'transparent',
          ':hover': {
            bg: 'transparent',
          },
          ':active': {
            bg: 'transparent',
          },
        },
      },
    },
    {
      action: 'primary',
      variant: 'outline',
      value: {
        'bg': 'transparent',
        ':hover': {
          bg: '$backgroundLight50',
        },
        ':active': {
          bg: 'transparent',
        },
        '_dark': {
          'bg': 'transparent',
          ':hover': {
            bg: '$backgroundDark900',
          },
          ':active': {
            bg: 'transparent',
          },
        },
      },
    },
    {
      action: 'secondary',
      variant: 'outline',
      value: {
        'bg': 'transparent',
        ':hover': {
          bg: '$backgroundLight50',
        },
        ':active': {
          bg: 'transparent',
        },
        '_dark': {
          'bg': 'transparent',
          ':hover': {
            bg: '$backgroundDark900',
          },
          ':active': {
            bg: 'transparent',
          },
        },
      },
    },
    {
      action: 'positive',
      variant: 'outline',
      value: {
        'bg': 'transparent',
        ':hover': {
          bg: '$backgroundLight50',
        },
        ':active': {
          bg: 'transparent',
        },
        '_dark': {
          'bg': 'transparent',
          ':hover': {
            bg: '$backgroundDark900',
          },
          ':active': {
            bg: 'transparent',
          },
        },
      },
    },
    {
      action: 'negative',
      variant: 'outline',
      value: {
        'bg': 'transparent',
        ':hover': {
          bg: '$backgroundLight50',
        },
        ':active': {
          bg: 'transparent',
        },
        '_dark': {
          'bg': 'transparent',
          ':hover': {
            bg: '$backgroundDark900',
          },
          ':active': {
            bg: 'transparent',
          },
        },
      },
    },
    {
      action: 'primary',
      variant: 'solid',
      value: {
        _text: {
          'color': '$textLight0',
          ':hover': {
            color: '$textLight0',
          },
          ':active': {
            color: '$textLight0',
          },
        },
        _icon: {
          'color': '$textLight0',
          ':hover': {
            color: '$textLight0',
          },
          ':active': {
            color: '$textLight0',
          },
        },
        _spinner: {
          'props': { color: '$textLight0' },
          ':hover': {
            props: { color: '$textLight0' },
          },
          ':active': {
            props: { color: '$textLight0' },
          },
        },
        _dark: {
          _text: {
            'color': '$textDark0',
            ':hover': {
              color: '$textDark0',
            },
            ':active': {
              color: '$textDark0',
            },
          },
          _icon: {
            'color': '$textDark0',
            ':hover': {
              color: '$textDark0',
            },
            ':active': {
              color: '$textDark0',
            },
          },
          _spinner: {
            'props': { color: '$textDark0' },
            ':hover': {
              props: { color: '$textDark0' },
            },
            ':active': {
              props: { color: '$textDark0' },
            },
          },
        },
      },
    },
    {
      action: 'secondary',
      variant: 'solid',
      value: {
        _text: {
          'color': '$textLight0',
          ':hover': {
            color: '$textLight0',
          },
          ':active': {
            color: '$textLight0',
          },
        },
        _icon: {
          'color': '$textLight0',
          ':hover': {
            color: '$textLight0',
          },
          ':active': {
            color: '$textLight0',
          },
        },
        _spinner: {
          'props': { color: '$textLight0' },
          ':hover': {
            props: { color: '$textLight0' },
          },
          ':active': {
            props: { color: '$textLight0' },
          },
        },
        _dark: {
          _text: {
            'color': '$textDark0',
            ':hover': {
              color: '$textDark0',
            },
            ':active': {
              color: '$textDark0',
            },
          },
          _icon: {
            'color': '$textDark0',
            ':hover': {
              color: '$textDark0',
            },
            ':active': {
              color: '$textDark0',
            },
          },
          _spinner: {
            'props': { color: '$textDark0' },
            ':hover': {
              props: { color: '$textDark0' },
            },
            ':active': {
              props: { color: '$textDark0' },
            },
          },
        },
      },
    },
    {
      action: 'positive',
      variant: 'solid',
      value: {
        _text: {
          'color': '$textLight0',
          ':hover': {
            color: '$textLight0',
          },
          ':active': {
            color: '$textLight0',
          },
        },
        _icon: {
          'color': '$textLight0',
          ':hover': {
            color: '$textLight0',
          },
          ':active': {
            color: '$textLight0',
          },
          'props': { color: '$textLight0' },
        },
        _spinner: {
          'props': { color: '$textLight0' },
          ':hover': {
            props: { color: '$textLight0' },
          },
          ':active': {
            props: { color: '$textLight0' },
          },
        },

        _dark: {
          _text: {
            'color': '$textDark0',
            ':hover': {
              color: '$textDark0',
            },
            ':active': {
              color: '$textDark0',
            },
          },
          _icon: {
            'color': '$textDark0',
            ':hover': {
              color: '$textDark0',
            },
            ':active': {
              color: '$textDark0',
            },
          },
          _spinner: {
            'props': { color: '$textDark0' },
            ':hover': {
              props: { color: '$textDark0' },
            },
            ':active': {
              props: { color: '$textDark0' },
            },
          },
        },
      },
    },
    {
      action: 'negative',
      variant: 'solid',
      value: {
        _text: {
          'color': '$textLight0',
          ':hover': {
            color: '$textLight0',
          },
          ':active': {
            color: '$textLight0',
          },
        },
        _icon: {
          'color': '$textLight0',
          ':hover': {
            color: '$textLight0',
          },
          ':active': {
            color: '$textLight0',
          },
        },
        _spinner: {
          'props': { color: '$textLight0' },
          ':hover': {
            props: { color: '$textLight0' },
          },
          ':active': {
            props: { color: '$textLight0' },
          },
        },
        _dark: {
          _text: {
            'color': '$textDark0',
            ':hover': {
              color: '$textDark0',
            },
            ':active': {
              color: '$textDark0',
            },
          },
          _icon: {
            'color': '$textDark0',
            ':hover': {
              color: '$textDark0',
            },
            ':active': {
              color: '$textDark0',
            },
          },
          _spinner: {
            'props': { color: '$textDark0' },
            ':hover': {
              props: { color: '$textDark0' },
            },
            ':active': {
              props: { color: '$textDark0' },
            },
          },
        },
      },
    },
  ],

  'props': {
    size: 'md',
    variant: 'solid',
    action: 'primary',
  },

  '_web': {
    ':focusVisible': {
      outlineWidth: '$0.5',
      outlineColor: '$primary700',
      outlineStyle: 'solid',
      _dark: {
        outlineColor: '$primary300',
      },
    },
  },

  ':disabled': {
    opacity: 0.4,
  },
});