import { defineComponent, PropType, toRefs } from 'vue'
import { ToggleOpen } from '@/types'
// import './Burger.scss'

export const Burger = defineComponent({
  props: {
    open: {
      type: Boolean,
      required: true,
    },
    toggleOpen: {
      type: Function as PropType<ToggleOpen>,
      required: true,
    }
  },
  setup: props => {
    const { open } = toRefs(props)

    return () => (
      <div 
        data-testid="burger" 
        class="burger-menu"
        onClick={() => props.toggleOpen('burger')}
      >
        <div
          class="burger-menu-item"
          style={{
            opacity: 1,
            transform: open.value ? 'rotate(45deg)' : '',
            translate: open.value ? 'translate(-2px, -1px)' : '',
          }}
        />
        <div
          class="burger-menu-item"
          style={{
            opacity: open.value? '0' : '1',
          }}
        />
        <div
          class="burger-menu-item"
          style={{
            transform: open.value ? 'rotate(-45deg)' : '',
          }}
        />
      </div>
    )
  }
})