import { Button } from 'vant'
import { defineComponent, Ref, ref } from 'vue'
import Popups from '../popups'
import Feedback from '../popups/feedback'
import Setting from '../popups/setting'
import styles from './index.module.less'
import { postMessage } from '/src/helpers/native-message'
import { useMenu } from '../uses'
import runtime from '/src/pages/detail/runtime'

export function getImageUrl(name: string) {
  return new URL(`./icons/${name}.svg`, import.meta.url).href
}
export const settingPopup = ref<any>(null)
export const suggestPopup = ref<any>(null)

export default defineComponent({
  name: 'ColexiuHeader',
  setup() {
    const [show] = useMenu()
    return () => {
      return (
        <div
          class={[
            styles.header,
            show.value ? 'animate__animated animate__fadeInDown' : 'animate__animated animate__fadeOutUp',
          ]}
        >
          <div class={styles.left}>
            <Button icon={getImageUrl('back')} onClick={() => postMessage({ api: 'back' })}></Button>
          </div>
          <Button
            icon={getImageUrl('setting')}
            onClick={() => {
              console.log(settingPopup.value)
              settingPopup.value?.onShow()
            }}
            disabled={runtime.evaluatingStatus}
          ></Button>
          <Popups 
            ref={settingPopup}
            style={{
              borderRadius: '8px',
            }}
          >
            <Setting />
          </Popups>
          <Popups
            ref={suggestPopup}
            overlay={false}
            style={{
              borderRadius: '8px',
            }}
          >
            <Feedback />
          </Popups>
        </div>
      )
    }
  },
})
