import './Button.sass'
import { Show, Switch, Match, type JSXElement } from 'solid-js'
import { A } from '@solidjs/router'
import { Row } from '../index'

interface Props {
  label?: string
  to?: string
  onClick?: () => void
  edges?: 'curved' | 'rounded' | 'flat'
  design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
  submit?: boolean
  newtab?: boolean
  width?: number
  wide?: boolean
  icon?: (props: { size?: number }) => JSXElement
}

const getBorderRadius = (edge: Props['edges']) => {
  switch (edge) {
    case 'curved':
      return 'border-radius: 6px'
    case 'rounded':
      return 'border-radius: 32px'
    case 'flat':
      return 'border-radius: 0'
    default:
      return 'border-radius: 0'
  }
}

export default (props: Props) => {
  const borderRadius = getBorderRadius(props.edges)
  const Icon = props.icon
  return (
    <>
      <Show when={props.to}>
        <Switch>
          <Match when={props.design}>
            <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
              <button class={props.design} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                <Show when={props.icon}>
                  <span>{Icon && <Icon size={24} />}</span>
                </Show>
                {props.label || 'Click Me!'}
              </button>
            </A>
          </Match>
          <Match when={!props.design}>
            <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
              <button class="button" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                <Show when={props.icon}>
                  <span>{Icon && <Icon size={24} />}</span>
                </Show>
                {props.label || 'Click Me!'}
              </button>
            </A>
          </Match>
        </Switch>
      </Show>

      <Show when={!props.to}>
        <Switch>
          <Match when={props.design}>
            <Show when={props.submit}>
              <button class={props.design} type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                <Show when={props.icon}>
                  <span>{Icon && <Icon size={24} />}</span>
                </Show>
                {props.label || 'Click Me!'}
              </button>
            </Show>

            <Show when={!props.submit}>
              <button class={props.design} onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                <Row gap={0.5}>
                  <Show when={props.icon}>
                    <span>{Icon && <Icon size={24} />}</span>
                  </Show>
                  {props.label || 'Click Me!'}
                </Row>
              </button>
            </Show>
          </Match>
          <Match when={!props.design}>
            <Show when={props.submit}>
              <button class="button" type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                <Show when={props.icon}>
                  <span>{Icon && <Icon size={24} />}</span>
                </Show>
                {props.label || 'Click Me!'}
              </button>
            </Show>

            <Show when={!props.submit}>
              <button class="button" onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
                <Show when={props.icon}>
                  <span>{Icon && <Icon size={24} />}</span>
                </Show>
                {props.label || 'Click Me!'}
              </button>
            </Show>
          </Match>
        </Switch>
      </Show>
    </>
  )
}
