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


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 { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibWebview } from 'esoftplay/cache/lib/webview/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketPromotion_formArgs } from 'esoftplay/cache/market/promotion_form/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

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


export interface MarketPromotion_termArgs {
  id: string,
  title: string,
  image: string,
  terms_conditions: string
}
export interface MarketPromotion_termProps {

}
export default function m(props: MarketPromotion_termProps): any {
  const { id, title, image, terms_conditions } = LibNavigation.getArgsAll<any>(props)
  const [acc, setAcc] = useSafeState<boolean>(false)
  const [data, setData] = useSafeState<any>()


  useEffect(() => {
    new LibCurl(terms_conditions, null,
      (res, any) => {
        setData(res)
      }, (msg) => {
        LibDialog.warning(esp.lang("market/promotion_term", "get_failed"), msg?.message)
      }
    )
  }, [])

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader title={title} subtitle={esp.lang("market/promotion_term", "header_sub")} onlyBack />
      {
        !data ? <LibLoading /> :
          <>
            <ScrollView>
              <LibWebview onFinishLoad={() => { }} source={{ html: data }} />
            </ScrollView>
            <TouchableOpacity onPress={() => setAcc(!acc)} style={{ flexDirection: 'row', marginHorizontal: 15, alignItems: 'center' }} >
              <LibIcon name={acc ? "checkbox-marked" : "checkbox-blank-outline"} color={acc ? MarketStyle.colorPrimaryMarket : '#03192a'} />
              <Text allowFontScaling={false} style={{ flex: 1, paddingLeft: 8, fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", lineHeight: 20, letterSpacing: 0, textAlign: "left", color: "#03192a" }} >{esp.lang("market/promotion_term", "accept")}</Text>
            </TouchableOpacity>
            <MarketButton
              text={esp.lang("market/promotion_term", "btn_next")}
              textStyle={{ color: acc ? 'white' : '#000' }}
              colorBackground={acc ? MarketStyle.colorPrimaryMarket : LibStyle.colorGrey}
              buttonStyle={{ margin: 10, borderRadius: 20, marginTop: 15 }}
              onPress={() => {
                if (acc) {
                  LibNavigation.navigate<MarketPromotion_formArgs>('market/promotion_form', { promo_id: id, title: title })
                }
              }} />
          </>
      }
    </View>
  )
}