// withHooks

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketEmpty } from 'esoftplay/cache/market/empty/import';
import { MarketHeader } from 'esoftplay/cache/market/header/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_formArgs {
  promo_id: string,
  title: string
}
export interface MarketPromotion_formProps {

}

interface InSelect {
  onPress: () => void
  label: string,
  placeholder: string,
  info: string
}

function InputSelect(item: InSelect): any {
  return (
    <View style={{ marginHorizontal: 20, marginTop: 12 }} >
      <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", lineHeight: 14, letterSpacing: 0, textAlign: "left", color: "#03192a" }} >{item.label}</Text>
      <TouchableOpacity onPress={item.onPress} style={{ alignItems: 'center', flexDirection: 'row', paddingTop: 8, paddingBottom: 5, justifyContent: 'space-between', borderBottomWidth: 0.5, borderBottomColor: '#a5a5a5' }} >
        <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", lineHeight: 19, letterSpacing: 0, textAlign: "left", color: "#707070" }} >{item.placeholder}</Text>
        <LibIcon name='menu-down' />
      </TouchableOpacity>
      <Text allowFontScaling={false} style={{ paddingTop: 5, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 17, letterSpacing: 0, textAlign: "left", color: "#707070" }} >{item.info}</Text>
    </View>
  )
}

export default function m(props: MarketPromotion_formProps): any {
  const { promo_id, title } = LibNavigation.getArgsAll<any>(props)
  const [category, setCategory] = useSafeState<any>()
  const [slot, setSlot] = useSafeState<any>()
  const [check, setCheck] = useSafeState(false)
  const [error, setError] = useSafeState('')

  useEffect(() => {
    checkCategory()
  }, [])

  useEffect(() => {
    setSlot(undefined)
  }, [category])

  function checkCategory() {
    new LibCurl('shop/merchant_promo_cat?promo_id=' + promo_id, null,
      (res, msg) => {
        setCheck(true)
      }, (err) => {
        setError(err?.message)
      }, 1
    )
  }

  if (!check) {
    return (
      <View style={{ flex: 1 }} >
        <MarketHeader title={title} onlyBack />
        <MarketEmpty msg={error} />
      </View>
    )
  }

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader title={esp.lang("market/promotion_form", "header_title")} subtitle={title || esp.lang("market/promotion_form", "header_sub")} onlyBack />
      <ScrollView>
        <InputSelect label={esp.lang("market/promotion_form", "label_cat")} placeholder={category?.category_name || esp.lang("market/promotion_form", "select_cat")} info={esp.lang("market/promotion_form", "cat_info", title.toLowerCase())}
          onPress={() => {
            LibNavigation.navigateForResult('market/promotion_category', { promo_id: promo_id, selected_id: category?.category_id }, 2747)
              .then((x) => {
                setCategory(x)
              })
          }} />
        {
          category &&
          <InputSelect label={esp.lang("market/promotion_form", "label_date")} placeholder={slot?.start_datetime ? moment(slot?.start_datetime).localeFormat('DD MMMM YYYY') : esp.lang("market/promotion_form", "date")} info={esp.lang("market/promotion_form", "date_info", title.toLowerCase())}
            onPress={() => {
              LibNavigation.navigateForResult('market/promotion_slot', { promo_id: promo_id, category_id: category?.category_id, selected_id: slot?.id }, 2748)
                .then((x) => {
                  setSlot(x)
                })
            }} />
        }

        {
          LibUtils.checkUndefined(slot, 'id') &&
          <View style={{ marginHorizontal: 20, marginTop: 12 }} >
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", lineHeight: 14, letterSpacing: 0, textAlign: "left", color: "#03192a" }} >{esp.lang("market/promotion_form", "select_session")}</Text>
            <TouchableOpacity onPress={() => { }} style={{ alignItems: 'center', flexDirection: 'row', paddingTop: 8, paddingBottom: 5, justifyContent: 'space-between', borderBottomWidth: 0.5, borderBottomColor: '#a5a5a5' }} >
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", lineHeight: 19, letterSpacing: 0, textAlign: "left", color: "#707070" }} >{moment(slot?.start_datetime).localeFormat('DD MMMM YYYY HH.mm') + ' - ' + moment(slot?.end_datetime).localeFormat('DD MMMM YYYY HH.mm')}</Text>
              <LibIcon name={'radiobox-marked'} color={MarketStyle.colorPrimaryMarket} />
            </TouchableOpacity>
            <Text allowFontScaling={false} style={{ paddingTop: 5, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 17, letterSpacing: 0, textAlign: "left", color: "#707070" }} >{esp.lang("market/promotion_form", "section", title.toLowerCase())}</Text>
          </View>
        }

        {
          LibUtils.checkUndefined(slot, 'merchant_product') && slot.merchant_product > 0 &&
          <View style={{ marginHorizontal: 20, marginTop: 12 }} >
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", lineHeight: 14, letterSpacing: 0, textAlign: "left", color: "#03192a" }} >{esp.lang("market/promotion_form", "limit")}</Text>
            <View style={{ paddingTop: 8, paddingBottom: 5, borderBottomWidth: 0.5, borderBottomColor: '#a5a5a5' }} >
              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", lineHeight: 19, letterSpacing: 0, textAlign: "left", color: "#707070" }} >{esp.lang("market/promotion_form", "limit_produxt", slot?.merchant_product)}</Text>
            </View>
            <Text allowFontScaling={false} style={{ paddingTop: 5, fontFamily: "Arial", fontSize: 10, fontWeight: "normal", fontStyle: "normal", lineHeight: 17, letterSpacing: 0, textAlign: "left", color: "#707070" }} >{esp.lang("market/promotion_form", "limit_info")}</Text>
          </View>
        }

      </ScrollView>
      <MarketButton
        text={esp.lang("market/promotion_form", "btn_add")}
        textStyle={{ color: 'white' }}
        colorBackground={slot?.product_list ? MarketStyle.colorPrimaryMarket : '#d1d1d1'}
        buttonStyle={{ marginHorizontal: 15, marginVertical: 10, borderRadius: 20 }}
        onPress={() => {
          if (slot?.product_list && slot?.product_registered) {
            // LibNavigation.navigate<MarketPromotion_productArgs>('market/promotion_product', { promo: slot, promo_id: promo_id, product_cat_id: category?.category_id })
            LibNavigation.navigate('market/promotion_product_register', { promo: slot, promo_id: promo_id, product_cat_id: category?.category_id })
          }
        }}
      />
    </View>
  )
}