// withHooks

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import esp from 'esoftplay/esp';

import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';
import React, { useEffect } from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
moment().locale('id')


export interface MarketPromotion_slotArgs {
  promo_id: string,
  category_id: string,
  selected_id: string
}
export interface MarketPromotion_slotProps {

}
export default function m(props: MarketPromotion_slotProps): any {
  const { promo_id, category_id, selected_id } = LibNavigation.getArgsAll(props)
  const [slot, setSlot] = useSafeState<any>()

  useEffect(() => {
    getSlot()
    return () => {
      LibNavigation.cancelBackResult(LibNavigation.getResultKey(props))
    }
  }, [])

  function getSlot() {
    new LibCurl('shop/merchant_promo_list?promo_id=' + promo_id + '&category_id=' + category_id, null,
      (res, msg) => {
        setSlot(res)
      }, (err) => {
        LibDialog.warning(esp.lang("market/promotion_slot", "get_failed"), err?.message)
      }, 1
    )
  }

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader title={esp.lang("market/promotion_slot", "header_title")} onlyBack />
      {
        !slot ? <LibLoading /> :
          <ScrollView>
            {
              LibUtils.checkUndefined(slot, '0') && slot.map((item: any, i: number) => {
                return (
                  <View key={i} >
                    <TouchableOpacity onPress={() => {
                      LibNavigation.sendBackResult(item, LibNavigation.getResultKey(props))
                    }} style={{ paddingVertical: 10, paddingHorizontal: 17, flexDirection: "row", alignItems: 'center' }} >
                      <LibIcon name={item.id == selected_id ? "checkbox-marked-circle" : "checkbox-blank-circle-outline"} color={item.id == selected_id ? MarketStyle.colorBrown : "#888"} />
                      <View style={{ marginLeft: 5, padding: 10, borderRadius: 5, borderWidth: 1, borderColor: '#d1d1d1' }} >
                        <Text allowFontScaling={false} style={{ fontFamily: 'Arial', fontSize: 14, }} >{moment(item.start_datetime).localeFormat('DD')}</Text>
                      </View>
                      <View style={{ flex: 1, marginLeft: 10 }} >
                        <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", lineHeight: 18, letterSpacing: 0, textAlign: "left", color: "#707070" }}  >{LibUtils.getDateRange(item.start_datetime, item.end_datetime, 's.d')}</Text>
                      </View>
                    </TouchableOpacity>
                    <MarketSection_menu size="line" />
                  </View>
                )
              })
            }
          </ScrollView>
      }
    </View>
  )
}