// withHooks
import { EventButton } from 'esoftplay/cache/event/button/import';
import { EventHeader } from 'esoftplay/cache/event/header/import';
import { EventInput_rectangle } from 'esoftplay/cache/event/input_rectangle/import';
import { EventLabel_input } from 'esoftplay/cache/event/label_input/import';
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 { LibImage } from 'esoftplay/cache/lib/image/import';
import { LibKeyboard_avoid } from 'esoftplay/cache/lib/keyboard_avoid/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibProgress } from 'esoftplay/cache/lib/progress/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibToastProperty } from 'esoftplay/cache/lib/toast/import';
import esp from 'esoftplay/esp';
import useSafeState from 'esoftplay/state';

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


export interface VisitorEProps {
  onFilterChange?: (location: any) => void,
  location?: any,
  navigation: any
}

export default function m(props: VisitorEProps): any {
  const [image, setImage] = useSafeState<string>('')
  const { data } = LibNavigation.getArgsAll(props)

  let inputName = React.useRef<EventInput_rectangle>(null)

  useEffect(() => {
    setImage(data.image)
  }, [])

  function doEdit(): void {
    let post = {
      name: encodeURIComponent(inputName.current!.getText()),
      image: image,
    }

    if (inputName.current!.getText() == "") {
      LibToastProperty.show(esp.lang("event/visitor_edit", "alert_input_name"))
      return
    }
    if (image == '') {
      LibToastProperty.show(esp.lang("event/visitor_edit", "alert_input_photo"))
      return
    }

    LibDialog.confirm(esp.lang("event/visitor_edit", "alert_title_confirm"), esp.lang("event/visitor_edit", "alert_confirm"), esp.lang("event/visitor_edit", "button_ok"), () => {
      LibProgress.show(esp.lang("event/visitor_edit", "alert_waiting"))
      new LibCurl(data.url_update, post,
        (res, msg) => {
          LibProgress.hide();
          LibNavigation.backToRoot()
          // BigbangIndexProperty.setTab(0)
          LibNavigation.navigate('staff/id_card', { data: res })
        }, (error) => {
          LibProgress.hide();
          LibDialog.warning(esp.lang("event/visitor_edit", "err"), error?.message);
        }, 1)
    }, esp.lang("event/visitor_edit", "button_cancel"), () => { })
  }

  const width = LibStyle.width - 20

  return (
    <View style={{ flex: 1, backgroundColor: '#f6f6f6' }}>
      <EventHeader title={esp.lang("event/visitor_edit", "title_set_idcard")} />
      <LibKeyboard_avoid style={{ flex: 1 }}>
        <ScrollView showsVerticalScrollIndicator={false} >
          {
            image == '' &&
            <Text allowFontScaling={false} style={{ margin: 15, marginBottom: 0, fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: LibStyle.colorRed }}>{esp.lang("event/visitor_edit", "entry_full_data_to_continue")}</Text>
          }
          <View style={[{ paddingTop: 0, padding: 15, margin: 15, backgroundColor: '#fff', borderRadius: 5 }, LibStyle.elevation(2)]}>
            <TouchableOpacity onPress={() => {
              LibDialog.confirm(esp.lang("event/visitor_edit", "alert_confirm_title_image"), esp.lang("event/visitor_edit", "alert_confirm_image"), esp.lang("event/visitor_edit", "btn_ok_image"), () => {
                LibImage.fromCamera({ crop: { ratio: "1:1", forceCrop: true } }).then((url) => {
                  setImage(url)
                })
              }, esp.lang("event/visitor_edit", "btn_cancel_image"), () => { })
            }}>
              <View style={{ alignContent: 'center', alignItems: 'center', alignSelf: 'center', }}>
                <LibPicture source={image == '' ? esp.assets('icons/ic_no_pict.png') : { uri: image || data.image }} style={{
                  marginTop: 15,
                  height: width * 0.48,
                  resizeMode: 'cover',
                  width: width * 0.38,
                }} />
                <View style={{ width: 25, height: 25, borderRadius: 14.5, backgroundColor: LibStyle.colorRed, position: 'absolute', right: -10, bottom: -10, justifyContent: 'center', alignContent: 'center', alignItems: 'center' }}>
                  <LibIcon size={15} name="pencil" color="#fff" />
                </View>
              </View>
            </TouchableOpacity>
            <EventLabel_input label={esp.lang("event/visitor_edit", "label_input_name")} mandatory={false} />
            <EventInput_rectangle
              ref={inputName}
              style={{ borderColor: '#c4c4c4', height: 35, borderRadius: 5, marginTop: 8 }}
              defaultValue={data.user_data.name}
              onSubmitEditing={() => {
                image == '' ?
                  LibToastProperty.show(esp.lang("event/visitor_edit", "msg_error_no_photo"))
                  :
                  doEdit()
              }}
              placeholder={esp.lang("event/visitor_edit", "placeholder_input_name")}
            />
            <EventButton label={esp.lang("event/visitor_edit", "btn_save")} style={{ borderRadius: 5, marginTop: 20 }} onPress={() => {
              image == '' ?
                LibToastProperty.show(esp.lang("event/visitor_edit", "msg_error_no_photo"))
                :
                doEdit()
            }}
            />
          </View>
        </ScrollView>
      </LibKeyboard_avoid>
    </View>
  )
}