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


import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibImage } from 'esoftplay/cache/lib/image/import';
import { LibObject } from 'esoftplay/cache/lib/object/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketInput_square } from 'esoftplay/cache/market/input_square/import';
import { MarketKeep } from 'esoftplay/cache/market/keep/import';
import { MarketSlidingupProperty } from 'esoftplay/cache/market/slidingup/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';

import { useTimeout } from 'esoftplay/timeout';
import React, { useEffect, useRef } from 'react';
import { Text, TextInput, TouchableOpacity, View } from 'react-native';

export interface MarketProduct_variant_itemData {
  name: string,
  data: string,
  image: string,
  is_primary: number,
}

export interface MarketProduct_variant_itemProps {
  onChangeVariant: (data: MarketProduct_variant_itemData[]) => void,
  title: string,
  variant?: MarketProduct_variant_itemData[],
  onChangeName: (name: string) => void
  primary: 0 | 1
}

export function build(data: MarketProduct_variant_itemData): MarketProduct_variant_itemData {
  return data
}


export function getAllVariantName(variants?: MarketProduct_variant_itemData[]): string[] {
  let out: string[] = [esp.lang("market/product_variant_item", "color"), esp.lang("market/product_variant_item", "size")]
  if (variants) {
    out = LibUtils.uniqueArray(variants.sort((a, b) => b.is_primary - a.is_primary).map((v) => v.name))
  }
  return out
}

export function getAllVariantData(title: string, variants?: MarketProduct_variant_itemData[]): string[] {
  let out: string[] = []
  if (variants) {
    out = variants.filter((v) => v.name == title).map((v) => v.data)
  }
  return out
}
export function getAllVariantImage(title: string, variants?: MarketProduct_variant_itemData[]): string[] {
  let out: string[] = []
  if (variants) {
    out = variants.filter((v) => v.name == title).map((v) => v.image)
  }
  return out
}

export default function m(props: MarketProduct_variant_itemProps): any {
  const titleRef = useRef<TextInput>(null)
  const [allChips, setAllChips, getAllChips] = useSafeState<string[]>(getAllVariantData(props.title, props.variant))
  const [image, setImage] = useSafeState<string[]>(getAllVariantImage(props.title, props.variant))

  let chip = useRef('').current
  let [title] = MarketKeep(props?.title)
  const itemW = (LibStyle.width - 70) / 4

  const timeout1 = useTimeout()
  const timeout2 = useTimeout()


  const styleId_Z3qEOK: any = { width: itemW - 2, height: itemW - 2 }
  const styleId_1QXV10: any = { backgroundColor: MarketStyle.colorPrimaryMarket, alignItems: 'center', justifyContent: 'center', width: itemW }

  useEffect(() => {
    props.onChangeVariant(
      allChips.map((item, i) => build({
        name: title,
        data: item,
        image: image[i],
        is_primary: props.primary
      }))
    )
  }, [allChips, title, image])

  function addVariant(r: string) {
    if (getAllChips().includes(chip)) {
      LibToastProperty.show(esp.lang("market/product_variant_item", "variant", chip))
      return
    }
    if (chip == '') {
      LibToastProperty.show(esp.lang("market/product_variant_item", "empty_variant"))
      return
    }
    setAllChips((c) => LibObject.push(c, chip)())
  }

  function slide() {
    MarketSlidingupProperty.add(
      <View style={styleId_27VUqJ} >
        <View style={styleId_Z20F5tD} >
          <TouchableOpacity onPress={() => { MarketSlidingupProperty.hide() }} >
            <LibIcon name='close' />
          </TouchableOpacity>
          <Text allowFontScaling={false} style={styleId_Z1EQ2IC} >{esp.lang("market/product_variant_item", "add_options")}</Text>
        </View>
        <View style={styleId_Z27jvu8} >
          <MarketInput_square
            label={esp.lang("market/product_variant_item", "label_options")}
            placeholder={esp.lang("market/product_variant_item", "placeholder_option")}
            onChangeText={(x) => { chip = x }}
          />
        </View>
        <MarketButton text={esp.lang("market/product_variant_item", "btn_add_options")}
          textStyle={styleId_21Duj3}
          buttonStyle={styleId_Z1E5LQa}
          onPress={() => { addVariant(chip); MarketSlidingupProperty.hide() }} />
      </View>
    )
  }
  function slideVariant() {
    MarketSlidingupProperty.add(
      <View style={styleId_27VUqJ} >
        <View style={styleId_Z20F5tD} >
          <TouchableOpacity onPress={() => { MarketSlidingupProperty.hide() }} >
            <LibIcon name='close' />
          </TouchableOpacity>
          <Text allowFontScaling={false} style={styleId_Z1EQ2IC} >{esp.lang("market/product_variant_item", "change_variant")}</Text>
        </View>
        <View style={styleId_Z27jvu8} >
          <MarketInput_square
            label=' '
            autoFocus
            defaultValue={props.title}
            placeholder={esp.lang("market/product_variant_item", "placeholder_variant")}
            onChangeText={(x) => { title = x }}
          />
        </View>
        <MarketButton text={esp.lang("market/product_variant_item", "btn_save")}
          textStyle={styleId_21Duj3}
          buttonStyle={styleId_Z1E5LQa}
          onPress={() => { props.onChangeName(title); MarketSlidingupProperty.hide() }} />
      </View>
    )
  }

  return (
    <>
      <View style={styleId_Z19AXt} >
        <Text allowFontScaling={false} style={styleId_Z14FOSQ} >{props.title}</Text>
        <TouchableOpacity onPress={() => {
          slideVariant()
          timeout1(() => {
            MarketSlidingupProperty.show()
          }, 500);
        }} >
          <Text allowFontScaling={false} style={styleId_Z1nuV9a} >{esp.lang("market/product_variant_item", "btn_change")}</Text>
        </TouchableOpacity>
      </View>
      {
        <View style={styleId_Z1UdXNp} >
          <View style={styleId_ZyjK5F} >
            {
              allChips.length > 0 && allChips.map((item: any) => (
                <TouchableOpacity key={item}
                  onPress={() => { setAllChips(allChips.filter((_t) => _t != item)) }}
                  style={styleId_1czTro} >
                  <Text key={item} allowFontScaling={false} style={styleId_VATpN} >{item}</Text>
                  <LibIcon name='close-circle' color={'#a6a6a6'} size={16} style={styleId_Nnnug} />
                </TouchableOpacity>
              ))
            }
            {
              <TouchableOpacity
                onPress={() => {
                  slide()
                  timeout2(() => {
                    MarketSlidingupProperty.show()
                  }, 500);
                }}
                style={styleId_1czTro} >
                <LibIcon name='plus-box' color={'#a6a6a6'} size={16} style={styleId_wxUU9} />
                <Text allowFontScaling={false} style={styleId_VATpN} >{esp.lang("market/product_variant_item", "options_add")}</Text>
              </TouchableOpacity>
            }
          </View>
          {
            allChips.length > 0 && props.primary == 1 &&
            <>
              <View style={styleId_2mIkWK} >
                <Text allowFontScaling={false} style={styleId_VATpN} >{esp.lang("market/product_variant_item", "photo")}</Text>
                <Text allowFontScaling={false} style={styleId_ZMKxTf} >{esp.lang("market/product_variant_item", "options")}</Text>
              </View>

              <View style={styleId_19dkXS} >
                {
                  allChips.map((x, i) => (
                    <View key={i} style={styleId_23QjhE} >
                      <TouchableOpacity onPress={() => { LibImage.fromGallery().then((x) => (setImage(LibObject.splice(image, i, 1, x)()))) }}
                        style={[styleId_1Oc2lm, { width: itemW, height: itemW }]} >
                        {
                          !image[i] ?
                            <LibIcon name='plus' color={MarketStyle.colorPrimaryMarket} style={{}} />
                            :
                            <LibPicture
                              source={{ uri: image[i] }}
                              style={styleId_Z3qEOK} />
                        }
                      </TouchableOpacity>
                      <View style={styleId_1QXV10} >
                        <Text allowFontScaling={false} style={styleId_Z2fwDYe} >{x}</Text>
                      </View>
                    </View>
                  ))
                }
              </View>
            </>
          }
        </View>
      }
    </>
  )
}
const styleId_27VUqJ: any = { backgroundColor: 'white', borderTopLeftRadius: 15, borderTopRightRadius: 15 }
const styleId_Z20F5tD: any = { flexDirection: 'row', alignItems: 'center', padding: 10 }
const styleId_Z1EQ2IC: any = { marginLeft: 15, fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 0, textAlign: "left", color: "#03192a" }
const styleId_Z27jvu8: any = { marginHorizontal: 10 }
const styleId_21Duj3: any = { color: 'white' }
const styleId_Z1E5LQa: any = { marginBottom: 15, marginTop: 10, marginHorizontal: 24, borderRadius: 20 }
const styleId_Z19AXt: any = { paddingHorizontal: 20, paddingVertical: 15, flexDirection: 'row', alignItems: 'center', borderBottomWidth: 0.5, borderBottomColor: '#ecf0f1' }
const styleId_Z14FOSQ: any = { flex: 1, fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", lineHeight: 18, letterSpacing: 0, textAlign: "left", color: "#03192a" }
const styleId_Z1nuV9a: any = { fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", lineHeight: 18, letterSpacing: 0, textAlign: "left", color: MarketStyle.colorPrimaryMarket }
const styleId_Z1UdXNp: any = { paddingLeft: 20, paddingVertical: 15 }
const styleId_ZyjK5F: any = { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap' }
const styleId_1czTro: any = { flexDirection: 'row', alignItems: 'center', padding: 7, borderWidth: 1, borderColor: '#ecf0f1', borderRadius: 5, marginRight: 10, marginBottom: 10 }
const styleId_VATpN: any = { fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", lineHeight: 18, letterSpacing: 0, textAlign: "left", color: '#03192a' }
const styleId_Nnnug: any = { marginLeft: 8 }
const styleId_wxUU9: any = { marginRight: 8 }
const styleId_2mIkWK: any = { flexDirection: 'row', alignItems: 'center', marginTop: 10, paddingBottom: 15 }
const styleId_ZMKxTf: any = { fontFamily: "Arial", fontSize: 14, fontWeight: "normal", fontStyle: "normal", lineHeight: 18, letterSpacing: 0, textAlign: "left", color: '#a6a6a6' }
const styleId_19dkXS: any = { flexDirection: 'row', alignItems: 'flex-start', flexWrap: 'wrap' }
const styleId_23QjhE: any = { marginRight: 10, marginBottom: 10 }
const styleId_1Oc2lm: any = { borderWidth: 1, borderColor: MarketStyle.colorPrimaryMarket, alignItems: 'center', justifyContent: 'center' }
const styleId_Z2fwDYe: any = { fontFamily: "Arial", fontSize: 12, fontWeight: "normal", fontStyle: "normal", lineHeight: 18, letterSpacing: 0, textAlign: "center", color: 'white' }