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

import { LibCapture } from 'esoftplay/cache/lib/capture/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibLazy } from 'esoftplay/cache/lib/lazy/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPan } from 'esoftplay/cache/lib/pan/import';
import { LibPrint } from 'esoftplay/cache/lib/print/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 { LibWebview } from 'esoftplay/cache/lib/webview/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';

import React, { useRef } from 'react';
import { Linking, Platform, Pressable, ScrollView, TouchableOpacity, View } from 'react-native';

export interface MarketOrder_detail_label_printArgs {
  url: string
}
export interface MarketOrder_detail_label_printProps {

}
export default function m(props: MarketOrder_detail_label_printProps): any {
  const { url } = LibNavigation.getArgsAll<any>(props)
  const printOptions = useRef<LibSlidingup>(null)
  const downloadView = useRef<LibWebview>(null)
  const sizes = [
    {
      name: 'A4',
      width: 680,
      height: 963
    },
    {
      name: 'A5',
      width: 1020,
      height: 1438

    },
    {
      name: 'A6',
      width: 1360,
      height: 1917
    }
  ]

  return (
    <LibLazy>
      <View style={{ flex: 1 }}>
        <MarketHeader
          title={esp.lang("market/order_detail_label_print", "header_title")}
          rightView={() => (
            <TouchableOpacity onPress={() => { LibCapture.capture(downloadView, esp.lang("market/order_detail_label_print", "print")) }} style={{ height: 50, justifyContent: 'center', paddingRight: 17 }} >
              <LibIcon.AntDesign name='download' size={18} />
            </TouchableOpacity>
          )}
          leftIcon={{ name: "close", onPress: () => LibNavigation.back() }}
        />
        <ScrollView style={{ flex: 1 }} >
          <LibPan>
            <View pointerEvents='none' >
              <LibWebview
                ref={downloadView}
                maxWidth={LibStyle.width}
                scalesPageToFit
                onFinishLoad={() => { }}
                source={{ uri: url }}
              />
            </View>
          </LibPan>
        </ScrollView>
        <MarketButton text={esp.lang("market/order_detail_label_print", "btn_print")}
          icon={"printer"}
          iconSize={24}
          buttonStyle={{ margin: 20 }}
          onPress={() => { printOptions.current?.show() }}
        />

        <LibSlidingup ref={printOptions} >
          <View style={{ backgroundColor: 'white', borderTopLeftRadius: 20, borderTopRightRadius: 20, padding: 20 }} >
            <LibTextstyle textStyle='headline' text={esp.lang("market/order_detail_label_print", "paper")} style={{ textAlign: 'center' }} />
            <View style={{ marginTop: 24, marginBottom: 10, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }} >
              {
                sizes.map((size, idx) => (
                  <Pressable
                    key={size.name}
                    style={{ height: 70, width: 70, backgroundColor: 'white', borderRadius: 8, ...LibStyle.elevation(2), justifyContent: 'center', alignItems: 'center' }}
                    onPress={() => {
                      printOptions.current?.hide();
                      LibPrint.printAsync(url, size.width, size.height)
                    }} >
                    <LibIcon.AntDesign name={"file1"} size={30} color={'#888'} />
                    <LibTextstyle textStyle="body" text={size.name} style={{ color: '#888', marginTop: 5 }} />
                  </Pressable>
                ))
              }
            </View>
            <View style={{ marginHorizontal: 20, borderRadius: 13, paddingVertical: 8, marginTop: 20, padding: 20, backgroundColor: '#f7f8f9' }} >
              <LibTextstyle textStyle='caption1' text={esp.lang("market/order_detail_label_print", "tips_print")} />
              <LibTextstyle
                style={{ color: LibStyle.colorPrimary, marginTop: 10, textAlign: 'left' }}
                text={esp.lang("market/order_detail_label_print", "tips_1")}
                textStyle="caption1" />
              {
                Platform.OS == 'ios' &&
                <Pressable
                  style={{ marginTop: 10 }}
                  onPress={() => Linking.openURL('https://support.apple.com/id-id/HT201311')} >
                  <LibTextstyle
                    style={{ color: LibStyle.colorPrimary, textAlign: 'left' }}
                    text={esp.lang("market/order_detail_label_print", "tips_2")}
                    textStyle="caption1" />
                </Pressable>
              }
            </View>
          </View>
        </LibSlidingup>
      </View>
    </LibLazy>
  )
}