---
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
}

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'
  }
}

const { label, to, edges, design, submit, newtab } = Astro.props
const borderRadius = getBorderRadius(edges)
---

<script>
  const button = document.getElementById('button')!
  button.addEventListener('click', () => {
    onClick
  })
</script>

{
  to ? (
    design ? (
      <a href={to} aria-label={label} rel="noopener" target={newtab ? '_blank' : '_self'} data-astro-prefetch>
        <button class={design} style={borderRadius}>
          {label || 'Click Me!'}
        </button>
      </a>
    ) : (
      <a href={to} aria-label={label} rel="noopener" target={newtab ? '_blank' : '_self'} data-astro-prefetch>
        <button class="dasig-button" style={borderRadius}>
          {label || 'Click Me!'}
        </button>
      </a>
    )
  ) : design ? (
    submit ? (
      <button class={design} type="submit" style={borderRadius}>
        {label || 'Click Me!'}
      </button>
    ) : (
      <button class={design} id="button" style={borderRadius}>
        {label || 'Click Me!'}
      </button>
    )
  ) : submit ? (
    <button class="dasig-button" type="submit" style={borderRadius}>
      {label || 'Click Me!'}
    </button>
  ) : (
    <button class="dasig-button" id="button" style={borderRadius}>
      {label || 'Click Me!'}
    </button>
  )
}

<style lang="sass">
  @use '/src/styles/fonts.sass' as fonts
  @use 'sass:color'

  $primaryColor: #0075BB

  $bulmaPrimary: rgb(0, 235, 199)
  $bulmaPrimaryText: rgb(0, 31, 26)
  $bulmaLink: rgb(92, 111, 255)
  $bulmaLinkText: rgb(245, 246, 255)
  $bulmaInfo: rgb(128, 217, 255)
  $bulmaInfoText: rgb(0, 36, 51)
  $bulmaSuccess: rgb(91, 205, 154)
  $bulmaSuccessText: rgb(10, 31, 21)
  $bulmaWarning: rgb(255, 191, 41)
  $bulmaWarningText: rgb(41, 29, 0)
  $bulmaDanger: rgb(255, 128, 153)
  $bulmaDangerText: rgb(26, 0, 5)
  $bulmaLight: rgb(255, 255, 255)
  $bulmaLightText: rgb(46, 51, 61)
  $bulmaDark: rgb(57, 63, 76)
  $bulmaDarkText: rgb(243, 244, 246)
  $bulmaText: rgb(31, 34, 41)
  $bulmaTextText: rgb(235, 236, 240)
  $bulmaGhost: rgba(0,0,0,0)
  $bulmaGhostText: rgb(66, 88, 255)

  $bootstrapTextLight: rgb(255, 255, 253)
  $bootstrapTextDark: rgb(0, 0, 2)
  $bootstrapTextLink: rgb(139, 185, 254)
  $bootstrapPrimary: rgb(13, 110, 253)
  $bootstrapSecondary: rgb(92, 99, 106)
  $bootstrapSuccess: rgb(21, 115, 71)
  $bootstrapDanger: rgb(187, 45, 59)
  $bootstrapWarning: rgb(255, 202, 44)
  $bootstrapInfo: rgb(49, 210, 242)
  $bootstrapLight: rgb(211, 212, 213)
  $bootstrapDark: rgb(33, 37, 41)

  .dasig-button
    background-color: $primaryColor
    border: none
    color: white
    padding: 0.5rem 1.25rem
    text-align: center
    text-decoration: none
    display: inline-block
    font-size: 1rem
    font-weight: 500
    cursor: pointer
    transition: all 0.2s ease-out

    &:hover
      background-color: color.adjust($primaryColor, $blackness: 20%)

    &:active
      transform: scale(0.95)

  .bu-primary
    @extend .dasig-button
    font-family: fonts.$Inter
    background-color: $bulmaPrimary
    color: $bulmaPrimaryText
    border: none
    font-size: 1rem
    border-radius: 0.375rem
    font-weight: 500
    padding: 0.5rem 1.25rem
    height: 2.5rem

    &:hover
      background-color: color.adjust($bulmaPrimary, $lightness: 10%)

  .bu-link
    @extend .bu-primary
    background-color: $bulmaLink
    color: $bulmaLinkText

    &:hover
      background-color: color.adjust($bulmaLink, $lightness: 5%)

  .bu-info
    @extend .bu-primary
    background-color: $bulmaInfo
    color: $bulmaInfoText

    &:hover
      background-color: color.adjust($bulmaInfo, $lightness: 5%)

  .bu-success
    @extend .bu-primary
    background-color: $bulmaSuccess
    color: $bulmaSuccessText

    &:hover
      background-color: color.adjust($bulmaSuccess, $lightness: 5%)

  .bu-warning
    @extend .bu-primary
    background-color: $bulmaWarning
    color: $bulmaWarningText

    &:hover
      background-color: color.adjust($bulmaWarning, $lightness: 5%)

  .bu-danger
    @extend .bu-primary
    background-color: $bulmaDanger
    color: $bulmaDangerText

    &:hover
      background-color: color.adjust($bulmaDanger, $lightness: 5%)

  .bu-light
    @extend .bu-primary
    background-color: $bulmaLight
    color: $bulmaLightText

    &:hover
      background-color: color.adjust($bulmaLight, $lightness: 5%)

  .bu-dark
    @extend .bu-primary
    background-color: $bulmaDark
    color: $bulmaDarkText

    &:hover
      background-color: color.adjust($bulmaDark, $lightness: 5%)

  .bu-text
    @extend .bu-primary
    background-color: rgba(0,0,0,0)
    color: $bulmaTextText
    text-decoration: underline

    &:hover
      background-color: hsl(221,14%,14%)

  .bu-ghost
    @extend .bu-primary
    background-color: $bulmaGhost
    color: $bulmaGhostText

    &:hover
      background-color: transparent
      text-decoration: underline

  .bo-primary
    @extend .dasig-button
    font-family: 'Segoe UI', fonts.$Roboto
    background-color: $bootstrapPrimary
    color: $bootstrapTextLight
    border: none
    font-size: 1rem
    border-radius: 0.375rem
    font-weight: 400
    padding: 0.5rem 1.25rem
    height: 2.5rem
    margin: 0.25rem 0.125rem

    &:hover
      background-color: color.adjust($bootstrapPrimary, $blackness: 10%)

  .bo-secondary
    @extend .bo-primary
    background-color: $bootstrapSecondary

    &:hover
      background-color: color.adjust($bootstrapSecondary, $blackness: 10%)

  .bo-success
    @extend .bo-primary
    background-color: $bootstrapSuccess

    &:hover
      background-color: color.adjust($bootstrapSuccess, $blackness: 10%)

  .bo-danger
    @extend .bo-primary
    background-color: $bootstrapDanger

    &:hover
      background-color: color.adjust($bootstrapDanger, $blackness: 10%)

  .bo-warning
    @extend .bo-primary
    background-color: $bootstrapWarning
    color: $bootstrapTextDark

    &:hover
      background-color: color.adjust($bootstrapWarning, $lightness: 5%)

  .bo-info
    @extend .bo-primary
    background-color: $bootstrapInfo
    color: $bootstrapTextDark

    &:hover
      background-color: color.adjust($bootstrapInfo, $lightness: 5%)

  .bo-light
    @extend .bo-primary
    background-color: $bootstrapLight
    color: $bootstrapTextDark

    &:hover
      background-color: color.adjust($bootstrapLight, $blackness: 10%)

  .bo-dark
    @extend .bo-primary
    background-color: $bootstrapDark
    // color: $bootstrapTextDark

    &:hover
      background-color: color.adjust($bootstrapDark, $lightness: 10%)

  .bo-link
    @extend .bo-primary
    background-color: transparent
    color: $bootstrapTextLink
    text-decoration: underline

    &:hover
      color: color.adjust($bootstrapTextLink, $lightness: 5%)
      background-color: transparent
</style>
