// withHooks
import { EventMessage } from 'esoftplay/cache/event/message/import';
import { LibCurl_view } from 'esoftplay/cache/lib/curl_view/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/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 esp from 'esoftplay/esp';

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


export interface EventOrder_detail_instructionArgs {

}
export interface EventOrder_detail_instructionProps {
  dataTicket: any
}
export default function m(props: EventOrder_detail_instructionProps): any {
  let urlsInstruction: any[] = []
  let result = props?.dataTicket
  return (
    <View style={{ backgroundColor: '#fff', marginTop: 1, borderRadius: 7, overflow: 'hidden', marginHorizontal: 15, marginBottom: 0 }}>
      <LibCurl_view
        url={result?.url_instructions}
        onSuccess={(res, msg): any => {
          urlsInstruction = []
          res?.map?.((item: any) => {
            let matches = item.match(/(https?:\/\/[^\s]+)/g);
            if (matches) {
              urlsInstruction.push(...matches)
            }
          })
          return (
            <View style={{ margin: 15 }}>
              {
                res?.map((item: any, i: number) => {
                  const urls = item.match(/(https?:\/\/[^\s]+)/g)
                  const text = item.replace(urls?.[0], '~:::~')
                  const texts = text.split('~:::~')
                  return (
                    <TouchableOpacity key={i + 1} onPress={() => {
                      if (item.match(/(https?:\/\/[^\s]+)/g)) {
                        Linking.openURL(urls[0])
                      }
                    }}>
                      <Text allowFontScaling={false} style={{ flexWrap: 'wrap', marginBottom: 5, fontSize: 14, fontWeight: "normal", fontStyle: "normal", lineHeight: 18, color: "#4a4a4a", marginTop: 4 }}>
                        {texts?.[0]}
                        {urls && <Text allowFontScaling={false} style={{ flexWrap: 'wrap', marginBottom: 5, fontSize: 14, fontWeight: "normal", fontStyle: "normal", lineHeight: 18, color: LibStyle.colorBlue, marginTop: 4 }}>{urls[0]}</Text>}
                        {texts?.[1]}
                      </Text>
                    </TouchableOpacity>
                  )
                })
              }

              {
                urlsInstruction?.length > 0 && urlsInstruction?.map((item: any, i: number) => {
                  return (
                    <View key={i + 1} style={{ padding: 10, marginTop: 10, flexDirection: 'row-reverse' }}>
                      <TouchableOpacity onPress={() => {
                        LibUtils.share(item)
                      }} style={{ ...LibStyle.elevation(5), alignContent: 'center', alignItems: 'center', justifyContent: 'center', backgroundColor: LibStyle.colorPrimary, height: 40, width: 40, borderRadius: 20, marginHorizontal: 10 }}>
                        <LibIcon color="#fff" name="share" />
                      </TouchableOpacity>
                      <TouchableOpacity onPress={() => {
                        LibUtils.copyToClipboard(item)
                        LibToastProperty.show(esp.lang("event/order_detail", "copied"))
                      }} style={{ ...LibStyle.elevation(5), alignContent: 'center', alignItems: 'center', justifyContent: 'center', backgroundColor: LibStyle.colorPrimary, height: 40, width: 40, borderRadius: 20, marginHorizontal: 10 }}>
                        <LibIcon color="#fff" name="content-copy" />
                      </TouchableOpacity>
                      <TouchableOpacity onPress={() => {
                        Linking.openURL(item)
                      }} style={{ ...LibStyle.elevation(5), alignContent: 'center', alignItems: 'center', justifyContent: 'center', backgroundColor: LibStyle.colorPrimary, height: 40, width: 40, borderRadius: 20, marginHorizontal: 10 }}>
                        <LibIcon.MaterialIcons color="#fff" name="open-in-browser" />
                      </TouchableOpacity>
                    </View>
                  )
                })
              }

            </View>
          )
        }}
        onError={(err) => {
          return (
            <EventMessage
              message={err?.message}
            />
          )
        }}
      />
    </View>
  )
}