// withHooks

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketInput_square } from 'esoftplay/cache/market/input_square/import';
import { MarketProduct_variant_item, MarketProduct_variant_itemData, MarketProduct_variant_itemProperty } from 'esoftplay/cache/market/product_variant_item/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';
import React, { useEffect, useRef } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';


export interface MarketProduct_variant1Args {

}
export interface MarketProduct_variantData {
  name: string,
  data: string,
  image: string,
  is_primary: number,
}
export function build(variant: MarketProduct_variantData): MarketProduct_variantData {
  return variant
}
export interface MarketProduct_variant1Props {

}
export default function m(props: MarketProduct_variant1Props): any {
  const argProps = LibNavigation.getArgsAll<any>(props)
  const [variasi, setVariasi] = useSafeState<string[]>(MarketProduct_variant_itemProperty.getAllVariantName(argProps.options))
  const [name, setName] = useSafeState('')
  const [variasiData, setVariasiData] = useSafeState<MarketProduct_variant_itemData[]>(argProps.options || [])

  const slideVariant = useRef<LibSlidingup>(null)

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

  function deleteVariant(idx: number) {
    setVariasi(variasi.filter((x, i) => i != idx) || [])
  }

  return (
    <View style={{ flex: 1 }} >
      <MarketHeader
        leftIcon={{ name: "arrow-left", onPress: () => { LibNavigation.back() } }}
        title={esp.lang("market/product_variant1", "variant")}
      />
      <LibKeyboard_avoid style={{ flex: 1 }} >
        <View style={{ paddingHorizontal: 20, paddingVertical: 15, borderBottomWidth: 0.5, borderBottomColor: '#ecf0f1' }} >
          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, fontWeight: "bold", fontStyle: "normal", lineHeight: 18, letterSpacing: 0, textAlign: "left", color: "#03192a" }} >{esp.lang("market/product_variant1", "recomend_product")}</Text>
          <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", lineHeight: 18, letterSpacing: 0, textAlign: "left", color: "#a6a6a6" }} >{esp.lang("market/product_variant1", "max_product")}</Text>
        </View>

        <View style={{ marginHorizontal: 20, flexDirection: 'row', alignItems: 'center', paddingVertical: 15 }} >
          {
            variasi.map((item, i) => (
              <TouchableOpacity key={i} onPress={() => {
                deleteVariant(i)
              }} style={{ marginRight: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', backgroundColor: 'white', borderWidth: 1, borderColor: MarketStyle.colorPrimaryMarket, borderRadius: 5, padding: 8 }} >
                <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", lineHeight: 17, letterSpacing: 0, textAlign: "center", color: MarketStyle.colorPrimaryMarket }} >{item}</Text>
                <LibIcon name='delete' color={MarketStyle.colorPrimaryMarket} size={16} style={{ marginLeft: 5 }} />
              </TouchableOpacity>
            ))
          }
          <TouchableOpacity disabled={variasi.length == 2} onPress={() => slideVariant.current?.show()} style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', backgroundColor: variasi.length == 2 ? '#a6a6a6' : MarketStyle.colorPrimaryMarket, borderRadius: 5, padding: 8 }} >
            <LibIcon name='plus-box' color='white' size={16} style={{ marginRight: 5 }} />
            <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", lineHeight: 17, letterSpacing: 0, textAlign: "left", color: 'white' }} >{esp.lang("market/product_variant1", "create_new_variant")}</Text>
          </TouchableOpacity>
        </View>

        <View style={{ height: 6, backgroundColor: '#f5f5f5' }} />
        {
          variasi.map((item: any, i: number) => (
            <MarketProduct_variant_item
              key={item}
              title={item}
              variant={variasiData}
              primary={i == 0 ? 1 : 0}
              onChangeVariant={(data) => {
                if (i == 0) {
                  setVariasiData([...variasiData.filter((x) => x.is_primary != 1), ...data])
                } else {
                  setVariasiData([...variasiData.filter((x) => x.is_primary != 0), ...data])
                }
              }} />
          ))
        }
      </LibKeyboard_avoid >
      <View style={{ height: 6, backgroundColor: '#f5f5f5' }} />

      <LibSlidingup ref={slideVariant} >
        <View style={{ backgroundColor: 'white', borderTopLeftRadius: 15, borderTopRightRadius: 15 }} >
          <View style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }} >
            <TouchableOpacity onPress={() => { slideVariant.current?.hide() }} >
              <LibIcon name='close' />
            </TouchableOpacity>
            <Text allowFontScaling={false} style={{ marginLeft: 15, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#03192a" }} >{esp.lang("market/product_variant1", "create_new")}</Text>
          </View>
          <View style={{ marginHorizontal: 10 }} >
            <MarketInput_square
              label={esp.lang("market/product_variant1", "variant_name")}
              placeholder={esp.lang("market/product_variant1", "variant_placeholder")}
              onChangeText={setName}
            />
          </View>
          <MarketButton text={esp.lang("market/product_variant1", "create_variant")}
            textStyle={{ color: 'white' }}
            buttonStyle={{ marginBottom: 15, marginTop: 10, marginHorizontal: 24, borderRadius: 20 }}
            onPress={() => {
              setVariasi(LibObject.push(variasi, name)())
              slideVariant.current?.hide()
            }} />
        </View>
      </LibSlidingup>
    </View >

  )
}