// withHooks
// noPage
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';


import { LibScrollpicker } from 'esoftplay/cache/lib/scrollpicker/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';

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

export interface MarketTimeArgs {

}
export interface MarketTimeProps {
  onTimeChange: (time: string) => void
}
export default function m(props: MarketTimeProps): any {
  const refHour = useRef<any>(null)
  const refMinute = useRef<any>(null)
  const date = new Date()

  const allHours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
  const allMinutes = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59']
  const currHour = date.getHours().toString()
  const currMinute = date.getMinutes().toString()
  const [hour, setHour] = useSafeState<string>(currHour)
  const [minute, setMinute] = useSafeState<string>(currMinute)

  function onTimeChange() {
    const timeSelected = hour + ':' + minute
    if (props.onTimeChange)
      props.onTimeChange(timeSelected)
    else {
      LibToastProperty.show(timeSelected)
    }
  }

  return (
    <View style={{ flex: 1, backgroundColor: 'white' }} >
      <View style={{ height: 44, alignItems: 'flex-end', backgroundColor: '#f1f2f3' }} >
        <TouchableOpacity onPress={() => { onTimeChange() }} >
          <Text allowFontScaling={false} style={{ fontSize: 15, fontWeight: "500", paddingHorizontal: 9, paddingVertical: 13, paddingRight: 30, fontStyle: "normal", letterSpacing: 0, color: "#007aff" }} >{esp.lang("market/time", "done")}</Text>
        </TouchableOpacity>
      </View>
      <View style={{ height: 200, flexDirection: 'row', alignItems: 'center' }} >
        <LibScrollpicker
          ref={refHour}
          style={{ flex: 1, backgroundColor: 'white' }}
          dataSource={allHours}
          selectedIndex={allHours.indexOf(currHour)}
          itemHeight={40}
          wrapperHeight={200}
          wrapperColor={'#ffffff'}
          highlightColor={'#c8c7cc'}
          renderItem={(data: any, index: number, isSelected: boolean) => {
            return (
              <View>
                <Text allowFontScaling={false} style={{ fontWeight: isSelected ? 'bold' : 'normal' }} >{data}</Text>
              </View>
            )
          }}
          onValueChange={(data: any, selectedIndex: number) => {
            setHour(data)
          }}
        />
        <LibScrollpicker
          ref={refMinute}
          style={{ flex: 1, backgroundColor: 'white' }}
          dataSource={allMinutes}
          selectedIndex={allMinutes.indexOf(currMinute)}
          itemHeight={40}
          wrapperHeight={200}
          wrapperColor={'#ffffff'}
          highlightColor={'#c8c7cc'}
          renderItem={(data: any, index: number, isSelected: boolean) => {
            return (
              <View>
                <Text allowFontScaling={false} style={{ fontWeight: isSelected ? 'bold' : 'normal' }} >{data}</Text>
              </View>
            )
          }}
          onValueChange={(data: any, selectedIndex: number) => {
            setMinute(data)
          }}
        />
      </View>
    </View>
  )
}