import { defineComponent, PropType } from 'vue'
import { prefixCls } from '../constant'
import { voidFn } from '../utils'
import { MouseEventHandler } from '../types'

import { SvgIcon } from './svg-icon'

export const Toolbar = defineComponent({
  name: 'Toolbar',
  props: {
    zoomIn: {
      type: Function as PropType<MouseEventHandler>,
      default: voidFn
    },
    zoomOut: {
      type: Function as PropType<MouseEventHandler>,
      default: voidFn
    },
    rotateLeft: {
      type: Function as PropType<MouseEventHandler>,
      default: voidFn
    },
    rotateRight: {
      type: Function as PropType<MouseEventHandler>,
      default: voidFn
    },
    resize: {
      type: Function as PropType<MouseEventHandler>,
      default: voidFn
    }
  },
  setup(props) {
    return () => {
      return (
        <div class={`${prefixCls}-toolbar`}>
          <div
            role="button"
            aria-label='zoom in button'
            class="toolbar-btn toolbar-btn__zoomin"
            onClick={props.zoomIn}
          >
            <SvgIcon type="zoomin" />
          </div>

          <div
            role="button"
            aria-label='zoom out button'
            class="toolbar-btn toolbar-btn__zoomout"
            onClick={props.zoomOut}
          >
            <SvgIcon type="zoomout" />
          </div>

          <div
            role="button"
            aria-label='resize image button'
            class="toolbar-btn toolbar-btn__resize"
            onClick={props.resize}
          >
            <SvgIcon type="resize" />
          </div>

          <div
            role="button"
            aria-label='image rotate left button'
            class="toolbar-btn toolbar-btn__rotate"
            onClick={props.rotateLeft}
          >
            <SvgIcon type="rotate-left" />
          </div>

          <div
            role="button"
            aria-label='image rotate right button'
            class="toolbar-btn toolbar-btn__rotate"
            onClick={props.rotateRight}
          >
            <SvgIcon type="rotate-right" />
          </div>
        </div>
      )
    }
  }
})