// withHooks 
// noPage
import { applyStyle } from 'esoftplay';

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibIconStyle } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibStatusbar } from 'esoftplay/cache/lib/statusbar/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';

import React from 'react';
import { TouchableOpacity, View } from 'react-native';


export interface MarketHeaderIcon {
  name: LibIconStyle,
  containerStyle?: any,
  style?: any,
  size?: number,
  color?: string,
  onPress: () => void
}

export interface MarketHeaderProps {
  onlyBack?: boolean,
  leftIcon?: MarketHeaderIcon,
  rightIcon?: MarketHeaderIcon,
  title?: string,
  subtitle?: string,
  leftView?: () => any,
  rightView?: () => any,
  centerView?: () => any
  style?: any
}

export default function m(props: MarketHeaderProps): any {
  let { leftIcon, rightIcon, title, subtitle, leftView, rightView, centerView } = props

  if (props.onlyBack) {
    leftIcon = { name: "arrow-left", onPress: () => LibNavigation.back() }
  }

  return (
    <>
      <LibStatusbar style="dark" />
      <View style={applyStyle({ paddingTop: LibStyle.STATUSBAR_HEIGHT, borderBottomWidth: 0.5, borderBottomColor: "#ddd", flexDirection: "row", alignItems: "center", ...props.style })} >
        {
          leftView
            ? leftView()
            : leftIcon &&
            <TouchableOpacity onPress={leftIcon.onPress} style={applyStyle({ alignItems: "center", justifyContent: "center", height: 50, width: 50, ...leftIcon?.containerStyle })} >
              <LibIcon  {...leftIcon} />
            </TouchableOpacity>
            ||
            <View style={{ width: 50 }} />
        }
        {
          centerView ?
            centerView() :
            <View style={{ flex: 1, marginLeft: 10 }} >
              <LibTextstyle text={title || ''} textStyle={"headline"} style={applyStyle({ textAlign: "left" })} />
              {
                (!!subtitle) &&
                <LibTextstyle text={subtitle || ''} textStyle={"footnote"} style={applyStyle({ textAlign: "left" })} />
              }
            </View>
        }
        {
          rightView
            ? rightView()
            : rightIcon &&
            <TouchableOpacity onPress={rightIcon.onPress} style={applyStyle({ alignItems: "center", justifyContent: "center", height: 50, width: 50, ...leftIcon?.containerStyle })} >
              <LibIcon {...rightIcon} />
            </TouchableOpacity>
            ||
            <View style={{ width: 50 }} />
        }
      </View>
    </>
  )
}