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

import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibImage } from 'esoftplay/cache/lib/image/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';

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


export interface MarketImage_pickerProps {
  _ref: any,
  onFinish: (img: string | string[]) => void,
  onDelete?: () => void,
  option?: any
}
export default function m(props: MarketImage_pickerProps): any {

  return (
    <LibSlidingup ref={props._ref} >
      <View style={applyStyle({ backgroundColor: "white", borderTopLeftRadius: 20, borderTopRightRadius: 20 })} >
        <View style={applyStyle({ width: 40, height: 4, borderRadius: 2, backgroundColor: "#ccc", alignSelf: "center", margin: 10 })} />
        <View style={applyStyle([{ flexDirection: "row", padding: 20, justifyContent: "space-around" }, LibStyle.elevation(0)])} >
          <View style={applyStyle({ alignItems: "center" })} >
            <TouchableOpacity
              testID='upload-camera'
              onPress={() => { LibImage.fromCamera(props.option).then(props.onFinish); props._ref.current?.hide() }}
              style={applyStyle({ alignItems: "center", justifyContent: "center", ...LibStyle.elevation(0) })} >
              <LibPicture source={esp.assets('market/ic_camera_purple.png')} style={{ width: 60, height: 60 }} resizeMode='contain' />
            </TouchableOpacity>
            <LibTextstyle text={esp.lang("market/image_picker", "camera")} textStyle="footnote" style={applyStyle({ textAlign: "center", color: "#888", marginTop: 5 })} />
          </View>
          <View style={applyStyle({ alignItems: "center" })} >
            <TouchableOpacity
              testID='upload-gallery'
              onPress={() => { LibImage.fromGallery(props.option).then(props.onFinish); props._ref.current?.hide() }}
              style={applyStyle({ alignItems: "center", justifyContent: "center" })} >
              <LibPicture source={esp.assets('market/ic_gallery_purple.png')} style={{ width: 60, height: 60 }} resizeMode='contain' />
            </TouchableOpacity>
            <LibTextstyle text={esp.lang("market/image_picker", "gallery")} textStyle="footnote" style={applyStyle({ textAlign: "center", color: "#888", marginTop: 5 })} />
          </View>
          {
            props.onDelete &&
            <View style={applyStyle({ alignItems: "center" })} >
              <TouchableOpacity
                testID='delete'
                onPress={() => { props.onDelete && props.onDelete(); props._ref.current?.hide() }}
                style={applyStyle({ height: 54, width: 54, borderRadius: 35, borderWidth: 2, borderColor: "#888", alignItems: "center", justifyContent: "center" })} >
                <LibIcon.AntDesign name="close" color={"#888"} size={24} />
              </TouchableOpacity>
              <LibTextstyle text={esp.lang("market/image_picker", "delete")} textStyle="footnote" style={applyStyle({ textAlign: "center", color: "#888", marginTop: 5 })} />
            </View>
          }
        </View>
      </View>
    </LibSlidingup>
  )
}
function applyStyle(style: any) {
  return style
}