import { defineComponent, ref, Ref } from 'vue'
import { Row, Col, Icon, Button, NavBar, Slider, Popover, Circle } from 'vant'
import classnames from 'classnames'
import { formatTime, browser } from '/src/helpers/utils'
import Title from './title'
import state from './state'
import runtime from './runtime'
import RightButtons from './right-buttons'
import stateParent from '../state'
import IconArrowLeft from './icons/arrow-left.svg'

import styles from './header.module.less'
import { postMessage } from '/src/helpers/native-message'

const speedRef: Ref = ref(null)

export default defineComponent({
  props: {
    title: {
      type: String,
      default: '',
    },
    songs: {
      type: Object,
      default: {}
    },
    openLib: {
      type: Function,
      default: () => {}
    },
    openList: {
      type: Function,
      default: () => {}
    },
    onActiveKeyChange: {
      type: Function,
      default: () => {}
    },
    lib: {
      type: Object,
      default: null
    },
  },
  beforeCreate() {
    postMessage({
      api: 'setStatusBarTextColor',
      content: {
        statusBarTextColor: false
      }
    })
  },
  methods: {
    back() {
      if (this.browser.isApp) {
        postMessage({
          api: 'back'
        })
      } else {
        // this.$router.back()
        const parentId = stateParent.parentId || 1 as any
        (this as any).$router.replace({
          path: '/list/' + parentId
        })
      }
    }
  },
  data() {
    return {
      browser: browser(),
    }
  },
  render() {
    return (
      <div class="van-nav-bar--safe-area-inset-top">
        <div class={classnames(styles.header, {[styles.android]: browser().android})}>
          <div id="tips-step-1" class={styles['title-info']}>
            {state.mode === 'homework'? (
              <Title style={{marginLeft: '20PX'}} onClick={() => {}} title={this.title} rightView={false}/>
            ) : (
              <>
                <Button class={styles.back} onClick={this.back} icon={IconArrowLeft}/>
                <Title onClick={this.openList} title={this.title}/>
              </>
            )}
          </div>
          {runtime.osmd ? (
            <RightButtons
              {...this.$props}
            />
          ) : <van-skeleton title row="1" />}
        </div>
      </div>
    )
  }
})
