// withHooks

import { LibCurl } from 'esoftplay/cache/lib/curl/import';
import { LibDialog } from 'esoftplay/cache/lib/dialog/import';
import { LibFocus } from 'esoftplay/cache/lib/focus/import';
import { LibIcon } from 'esoftplay/cache/lib/icon/import';
import { LibLoading } from 'esoftplay/cache/lib/loading/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 { LibScroll } from 'esoftplay/cache/lib/scroll/import';
import { LibSkeleton } from 'esoftplay/cache/lib/skeleton/import';
import { LibSlidingup } from 'esoftplay/cache/lib/slidingup/import';
import { LibStatusbar } from 'esoftplay/cache/lib/statusbar/import';
import { LibStyle } from 'esoftplay/cache/lib/style/import';
import { LibTextstyle } from 'esoftplay/cache/lib/textstyle/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { MarketButton } from 'esoftplay/cache/market/button/import';
import { MarketHeader } from 'esoftplay/cache/market/header/import';
import { MarketSection_menu } from 'esoftplay/cache/market/section_menu/import';
import { MarketStyle } from 'esoftplay/cache/market/style/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import esp from 'esoftplay/esp';

import moment from 'esoftplay/moment';
import useSafeState from 'esoftplay/state';
import React, { useEffect, useRef } from 'react';
import { Pressable, Text, TouchableOpacity, View } from 'react-native';
moment().locale('id')


export interface MarketComplaint_detailArgs {
  url: string,
  order_id: string,
  merchant_id: string,
}
export interface MarketComplaint_detailProps {

}
export default function m(props: MarketComplaint_detailProps): any {
  const user = UserClass.state().get()
  const { order_id, merchant_id, url } = LibNavigation.getArgsAll<any>(props)
  const [isMerchant, setIsMerchant] = useSafeState(false)
  const [data, setData] = useSafeState<any>()
  const width = (LibStyle.width - 90) / 4
  const slidingRef = useRef<LibSlidingup>(null)


  useEffect(() => {
    getData()
  }, [])

  function getData() {
    new LibCurl(url, null,
      (res, msg) => {
        setIsMerchant(res.merchant_id == user?.merchant_id)
        setData(res)
      }, (msg) => {
        LibDialog.warning(esp.lang("market/complaint_detail", "get_failed"), msg?.message)
      }, 1
    )
  }

  function complaintApproveByMerchant() {
    LibProgress.show(esp.lang("market/complaint_detail", "complaint_approve_merchant_wait"))
    new LibCurl('shop/order_complaint_merchant', { sale_id: order_id, solution_merchant: data?.solution_buyer?.id },
      (res, msg) => {
        esp.log(res, msg);
        getData()
        LibProgress.hide()
        LibDialog.info(esp.lang("market/complaint_detail", "complaint_approve_merchant_ok"), msg)
      }, (err) => {
        LibProgress.hide()
        LibDialog.warning(esp.lang("market/complaint_detail", "complaint_approve_merchant_failed"), err?.message)
        esp.log(err);
      }, 1
    )
  }

  function complaintRefusedByMerchant(solution_merchant: string) {
    LibProgress.show(esp.lang("market/complaint_detail", "complaint_refuse_merchant_wait"))
    // console.log({ sale_id: order_id, solution_merchant: solution_merchant })
    new LibCurl('shop/order_complaint_merchant', { sale_id: order_id, solution_merchant: solution_merchant },
      (res, msg) => {
        getData()
        LibProgress.hide()
        LibDialog.info(esp.lang("market/complaint_detail", "complaint_refuse_merchant_ok"), msg)
      }, (msg) => {
        LibProgress.hide()
        LibDialog.warning(esp.lang("market/complaint_detail", "complaint_refuse_merchant_failed"), msg?.message)
      }, 1
    )
  }

  if (!data) {
    return (
      <LibSkeleton>
        <LibStatusbar style="dark" />
        <View style={styleId_Z1pWJf0} >
          <Pressable onPress={() => LibNavigation.back()} style={styleId_Z8twMu} >
            <LibIcon name="arrow-left" />
          </Pressable>
          <View style={styleId_23fjhC} >
            <View style={styleId_1g6fuB} />
          </View>
        </View>
        <View style={styleId_Z2maV4Q}>
          <View style={styleId_Wja5b} />
          <View style={styleId_Z1zQbu4} />
          <View style={styleId_Z2x5D91} />
        </View>
        <View style={styleId_Z2urSUJ}>
          <View style={styleId_2sXOqc} />
          <View style={styleId_23fjhC}>
            <View style={styleId_Wja5b} />
            <View style={styleId_Z93aSJ} />
          </View>
          <View style={styleId_Z1ImIqK} />
        </View>
        <View style={styleId_1Qem4n}>
          <View style={styleId_Wja5b} />
        </View>
        <View style={styleId_Z27iQsf} >
          <View style={styleId_1MELxH} />
          <View style={styleId_Z28OTea} />
          <View style={styleId_1MELxH} />
          <View style={styleId_Z28OTea} />
          <View style={styleId_1MELxH} />
          <View style={styleId_Z28OTea} />
        </View>
        <View style={styleId_1Qem4n}>
          <View style={styleId_Wja5b} />
        </View>
        <View style={styleId_5dKHp}>
          <View style={[styleId_Zv2oiv, { width: width, height: width }]} />
          <View style={styleId_ZcMJmd}>
            <View style={styleId_Wja5b} />
            <View style={styleId_Z28OTea} />
          </View>
          <View style={styleId_ZwlfUh} />
        </View>
        <View style={styleId_Z2pAYQ1}>
          <View style={styleId_2i9Bl9} />
          <View style={styleId_Z1ImIqK} />
        </View>
      </LibSkeleton>
    )
  }

  const qtyProductOnProblem = data?.products?.reduce((acc: any, curr: any) => acc + parseInt(curr.product_qty), 0)

  return (
    <View style={styleId_ZcMJmd} >
      <MarketHeader onlyBack title={LibUtils.ucwords(isMerchant ? esp.lang("market/complaint_detail", "complaint_from", data?.buyer_name) : esp.lang("market/complaint_detail", "compaint_to", data?.merchant_name))} />
      <LibFocus onFocus={getData} />
      {
        !data ? <LibLoading /> :
          <>
            <LibScroll onRefresh={getData} >
              <View style={styleId_FKv8Q} >
                <Text allowFontScaling={false} style={styleId_hU4G0} >{data?.status?.desc}</Text>
                {/* {
                  isMerchant ?
                    <Text allowFontScaling={false} style={styleId_hU4G0} >{
                      data?.status?.desc

                      // data?.status?.id == 1 ?
                      //   'Menunggu Respons Kamu' :
                      //   data?.status?.id == 2 ?
                      //     'Komplain Sudah Anda Setujui' :
                      //     data?.status?.id == 3 ?
                      //       'Komplain Ini Anda Tolak' :
                      //       data?.status?.desc
                    }</Text>
                    :
                    <Text allowFontScaling={false} style={styleId_hU4G0} >{
                      data?.status?.desc

                      // data?.status?.id == 1 ?
                      //   'Menunggu Respons Penjual' :
                      //   data?.status?.desc
                    }</Text>
                } */}

                {
                  // isMerchant && data.received == 0 &&
                  // <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, lineHeight: 20, marginTop: 10 }} >{'Saat ini pembeli belum menerima barang yang sudah kamu kirim. Mohon untuk pastikan resi pengiriman yang kamu inputkan sudah benar'}</Text>
                }
                {
                  data?.status?.id == 1 && isMerchant &&
                  <Text allowFontScaling={false} style={styleId_1RxfkJ} >{esp.lang("market/complaint_detail", "response_max", moment(data?.created).add(2, 'days').localeFormat('DD MMMM YYYY HH:mm'))}</Text>
                }
                {
                  // data?.status?.id != 1 && data?.status?.id != 4 && !isMerchant &&
                  // <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 14, lineHeight: 20, marginTop: 10 }} >{'Jika solusi yang diberikan oleh Merchant tidak sesuai, anda dapat menggunakan fitur diskusi pada halaman ini.'}</Text>
                }
                {
                  data?.status?.id == 1 && !isMerchant &&
                  <Text allowFontScaling={false} style={styleId_1RxfkJ} >{esp.lang("market/complaint_detail", "merchant_response_max", moment(data?.created).add(2, 'days').localeFormat('DD MMMM YYYY'))}</Text>
                }
              </View>
              <View style={styleId_dt7dA} >
                <View style={styleId_Z2a1nAh} >
                  <LibPicture source={{ uri: isMerchant ? data?.buyer_image : data?.merchant_image }} style={styleId_1gStcG} />
                  <View style={styleId_23fjhC} >
                    <Text allowFontScaling={false} style={styleId_hTNFf} >{LibUtils.ucwords(isMerchant ? data?.buyer_name : data?.merchant_name)}</Text>
                    <Text allowFontScaling={false} style={styleId_hTNFf} >{isMerchant ? esp.lang("market/complaint_detail", "buyer") : esp.lang("market/complaint_detail", "merchant")}</Text>
                  </View>
                  <Text allowFontScaling={false} style={styleId_hTxEu} >{moment(data?.created).localeFormat('DD MMMM YYYY')}</Text>
                </View>

                {
                  data?.statuses && data?.statuses?.length > 0 &&
                  <>
                    <View style={styleId_Z1nzQPR} >
                      <Text allowFontScaling={false} style={styleId_hTNFf} >{esp.lang("market/complaint_detail", "complaint_status")}</Text>
                    </View>
                    <View style={styleId_Zrz44M} >
                      <View style={styleId_ZcMJmd} >
                        <LibTextstyle textStyle="callout" text={data?.statuses?.[0]?.title} style={styleId_Z2mCmbA} />
                        <LibTextstyle textStyle="footnote" text={moment(data?.statuses?.[0]?.created).localeFormat('YYYY-MM-DD HH:mm')} style={styleId_Z1fhvD6} />
                      </View>
                      <TouchableOpacity onPress={() => { LibNavigation.navigate('market/complaint_status_detail', { statuses: data?.statuses }) }} >
                        <LibTextstyle textStyle="footnote" text={esp.lang("market/complaint_detail", "detail")} style={styleId_ZwGcPJ} />
                      </TouchableOpacity>
                    </View>
                  </>
                }

                <View style={styleId_Z1nzQPR} >
                  <Text allowFontScaling={false} style={styleId_hTNFf} >{esp.lang("market/complaint_detail", "complaint_detail")}</Text>
                </View>

                <Text allowFontScaling={false} style={styleId_Z23pPY2} >{esp.lang("market/complaint_detail", "invoice")}</Text>
                <Text allowFontScaling={false} style={styleId_w3cxJ} >{data?.invoice_merchant}</Text>

                <Text allowFontScaling={false} style={styleId_Z23pPY2} >{esp.lang("market/complaint_detail", "item_status")}</Text>
                <Text allowFontScaling={false} style={[styleId_Z1MhN9b, { color: data?.received == 1 ? MarketStyle.colorGreen : LibStyle.colorRed }]} >{data?.received == 1 ? esp.lang("market/complaint_detail", "item_received") : esp.lang("market/complaint_detail", "item_not_receive")}</Text>

                <Text allowFontScaling={false} style={styleId_cIMFY} >{esp.lang("market/complaint_detail", "buyer_solution")}</Text>
                {
                  data?.solution_buyer != '' &&
                  <Text allowFontScaling={false} style={styleId_fpbpu} >{data?.solution_buyer?.desc}</Text>
                }

                {
                  data?.status?.id != 1 &&
                  <>
                    <Text allowFontScaling={false} style={styleId_cIMFY} >{esp.lang("market/complaint_detail", "merchant_solution")}</Text>
                    {
                      data?.solution_merchant != '' &&
                      <Text allowFontScaling={false} style={styleId_fpbpu} >{data?.solution_merchant?.desc}</Text>
                    }
                  </>
                }

                {
                  LibUtils.checkUndefined(data, 'products.0') &&
                  <View style={styleId_Z1nzQPR} >
                    <Text allowFontScaling={false} style={styleId_hTNFf} >{esp.lang("market/complaint_detail", "problem_product", qtyProductOnProblem)}</Text>
                  </View>
                }

                {
                  LibUtils.checkUndefined(data, 'notes') && data.notes != '' && data.notes != null &&
                  <>
                    <Text allowFontScaling={false} style={styleId_cIMFY} >{esp.lang("market/complaint_detail", "reason")}</Text>
                    <Text allowFontScaling={false} style={styleId_fpbpu} >{data.notes}</Text>
                  </>
                }

                {
                  LibUtils.checkUndefined(data, 'images.0') &&
                  <Text allowFontScaling={false} style={styleId_Z23pPY2} >{esp.lang("market/complaint_detail", "complaint_proof")}</Text>
                }
                <View style={styleId_Z1vhh93} >
                  {
                    LibUtils.checkUndefined(data, 'images.0') && data.images.map((item: any, i: number) => (
                      <TouchableOpacity key={i} onPress={() => { LibNavigation.navigate("lib/gallery", { image: item }) }} style={[styleId_ZgOh9, { width: width, height: width }]} >
                        <LibPicture source={{ uri: item }} style={[styleId_Z1IXE93, { width: width, height: width }]} />
                      </TouchableOpacity>
                    ))
                  }
                </View>

                <View style={styleId_Z1ctQzc} >
                  {
                    data && data?.products?.map?.((item: any, i: number) => (
                      <View key={i} style={styleId_12lRXe} >
                        <LibPicture source={{ uri: item.product_image }} style={[styleId_Zd5nLD, { width: width, height: width }]} />
                        <View style={styleId_23fjhC} >
                          <Text allowFontScaling={false} style={styleId_Z23pnoR} >{item?.product_name}</Text>
                          <Text allowFontScaling={false} style={styleId_hTNFf} >{item?.product_qty + ' x ' + LibUtils.money(item?.product_price)}</Text>
                        </View>
                        <Text allowFontScaling={false} style={styleId_hTNFf} >{LibUtils.money(Number(item.product_price) * Number(item.product_qty))}</Text>
                      </View>
                    ))
                  }
                </View>

                <View style={styleId_Z1S7QjE} >
                  <Text allowFontScaling={false} style={styleId_Z2h27zO} >{esp.lang("market/complaint_detail", "problem_fund")}</Text>
                  <Text allowFontScaling={false} style={styleId_1PKjOX} >{LibUtils.money(data?.total)}</Text>
                </View>

              </View>
            </LibScroll>

            {
              isMerchant ?
                <>
                  {
                    data?.status?.id == 1 ?
                      <View style={styleId_Z15JWis} >
                        <View style={styleId_L567G}>
                          <MarketButton
                            color={MarketStyle.colorPrimaryMarket}
                            textStyle={styleId_ZwGcPJ}
                            colorBackground={'white'}
                            colorBorder={MarketStyle.colorPrimaryMarket}
                            onPress={() => { slidingRef.current?.show() }}
                            text={esp.lang("market/complaint_detail", "total_request")}
                            buttonStyle={styleId_ZWTVYs} />
                        </View>
                        <View style={styleId_L567G}>
                          <MarketButton
                            textStyle={styleId_Z1SArsq}
                            onPress={() => {
                              LibDialog.warningConfirm(esp.lang("market/complaint_detail", "complaint_title"), esp.lang("market/complaint_detail", "complaint_msg"), esp.lang("market/complaint_detail", "complaint_confirm"), () => { complaintApproveByMerchant() }, esp.lang("market/complaint_detail", "complaint_cancel"), () => { })
                            }}
                            text={esp.lang("market/complaint_detail", "accept_solution")}
                            buttonStyle={styleId_HAz6T} />
                        </View>
                      </View>
                      :
                      <MarketButton
                        icon={'message-text'}
                        iconSize={20}
                        color={MarketStyle.colorPrimaryMarket}
                        textStyle={styleId_ZwGcPJ}
                        colorBackground={'white'}
                        colorBorder={MarketStyle.colorPrimaryMarket}
                        onPress={() => { LibNavigation.navigate('market/complaint_discuss', { url_complaint: url }) }}
                        buttonStyle={styleId_1vuOTq}
                        text={esp.lang("market/complaint_detail", "discuss_with_buyer")} />
                  }
                </>
                :
                <>
                  {/* {
                    data?.status?.id == 3 &&
                    <View style={{ flexDirection: "row", justifyContent: "space-between", marginVertical: 10 }} >
                      <View style={styleId_L567G}>
                        <MarketButton
                          icon={'message-text'}
                          iconSize={20}
                          color={MarketStyle.colorPrimaryMarket}
                          textStyle={styleId_ZwGcPJ}
                          colorBackground={'white'}
                          colorBorder={MarketStyle.colorPrimaryMarket}
                          onPress={() => { LibNavigation.navigate<MarketComplaint_discussArgs>('market/complaint_discuss', { url_complaint: url }) }}
                          text="Diskusi"
                          buttonStyle={{ marginLeft: 10 }} />
                      </View>
                      <View style={styleId_L567G}>
                        <MarketButton
                          textStyle={styleId_Z1SArsq}
                          onPress={() => {
                            LibDialog.warningConfirm('Konfirmasi', 'Yakin untuk menerima solusi dari Merchant?\nKomplain akan diselesaikan jika anda menyetujui solusi yang diberikan Merchant.',
                              'TERIMA'
                              , () => { complaintApproveByUser() },
                              'BATAL'
                              , () => { })
                          }}
                          text="Terima Solusi"
                          buttonStyle={{ marginRight: 10 }} />
                      </View>
                    </View>
                  } */}
                  {
                    data?.status?.id > 1 &&
                    <MarketButton
                      icon={'message-text'}
                      iconSize={20}
                      color={MarketStyle.colorPrimaryMarket}
                      textStyle={styleId_ZwGcPJ}
                      colorBackground={'white'}
                      colorBorder={MarketStyle.colorPrimaryMarket}
                      onPress={() => { LibNavigation.navigate('market/complaint_discuss', { url_complaint: url }) }}
                      buttonStyle={styleId_1vuOTq}
                      text={esp.lang("market/complaint_detail", "discuss_with_seller")} />
                  }
                </>
            }
          </>
      }
      <LibSlidingup ref={slidingRef} >
        <View style={styleId_Z25UOiL} >
          <LibTextstyle textStyle="headline" text={esp.lang("market/complaint_detail", "give_other_solution")} style={styleId_Z1atydL} />
          <MarketSection_menu size="line" />
          <MarketButton
            text={esp.lang("market/complaint_detail", "btn_select_solution")}
            buttonStyle={styleId_Z1gmFFy}
            onPress={() => {
              LibNavigation.navigateForResult('market/complaint_solution', { exclude_id: data?.solution_buyer.id }).
                then((x) => {
                  complaintRefusedByMerchant(x.id)
                  slidingRef.current?.hide()
                })
            }} />
        </View>
      </LibSlidingup>
    </View>
  )
}
const styleId_Z1pWJf0: any = { paddingTop: LibStyle.STATUSBAR_HEIGHT, borderBottomColor: "#ddd", flexDirection: "row", alignItems: "center", borderBottomWidth: 1 }
const styleId_Z8twMu: any = { alignItems: "center", justifyContent: "center", height: 50, width: 50 }
const styleId_23fjhC: any = { flex: 1, marginLeft: 10 }
const styleId_1g6fuB: any = { width: '50%', height: 18, backgroundColor: 'white', borderRadius: 10 }
const styleId_Z2maV4Q: any = { marginHorizontal: 15, marginTop: 15 }
const styleId_Wja5b: any = { height: 15, width: '40%', borderRadius: 10, backgroundColor: 'white' }
const styleId_Z1zQbu4: any = { height: 12, width: '100%', borderRadius: 10, marginTop: 5, backgroundColor: 'white' }
const styleId_Z2x5D91: any = { height: 12, width: '50%', borderRadius: 10, marginTop: 5, backgroundColor: 'white' }
const styleId_Z2urSUJ: any = { borderTopWidth: 1, padding: 15, marginTop: 15, flexDirection: 'row', alignItems: 'center' }
const styleId_2sXOqc: any = { width: 40, height: 40, borderRadius: 20, backgroundColor: 'white' }
const styleId_Z93aSJ: any = { height: 15, width: '40%', borderRadius: 10, marginTop: 5, backgroundColor: 'white' }
const styleId_Z1ImIqK: any = { height: 15, width: '20%', borderRadius: 10, backgroundColor: 'white' }
const styleId_1Qem4n: any = { marginTop: 10, paddingHorizontal: 15, paddingVertical: 10, borderWidth: 1 }
const styleId_Z27iQsf: any = { marginHorizontal: 15 }
const styleId_1MELxH: any = { height: 12, width: '20%', borderRadius: 10, marginTop: 10, backgroundColor: 'white' }
const styleId_Z28OTea: any = { height: 15, width: '60%', borderRadius: 10, marginTop: 5, backgroundColor: 'white' }
const styleId_5dKHp: any = { borderTopWidth: 1, borderBottomWidth: 1, marginTop: 10, flexDirection: 'row', alignItems: 'center' }
const styleId_Zv2oiv: any = { borderRadius: 5, backgroundColor: 'white', margin: 15 }
const styleId_ZcMJmd: any = { flex: 1 }
const styleId_ZwlfUh: any = { height: 15, width: '20%', borderRadius: 10, backgroundColor: 'white', marginRight: 15 }
const styleId_Z2pAYQ1: any = { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', margin: 15 }
const styleId_2i9Bl9: any = { height: 15, width: '50%', borderRadius: 10, backgroundColor: 'white' }
const styleId_FKv8Q: any = { backgroundColor: 'white', paddingHorizontal: 15, paddingTop: 10, paddingBottom: 15, borderBottomWidth: 1, borderBottomColor: '#f1f1f1' }
const styleId_hU4G0: any = { fontFamily: "Arial", fontSize: 16 }
const styleId_1RxfkJ: any = { fontFamily: "Arial", fontSize: 11, lineHeight: 15, marginTop: 5 }
const styleId_dt7dA: any = { margin: 15 }
const styleId_Z2a1nAh: any = { flexDirection: 'row', alignItems: 'center', marginBottom: 15 }
const styleId_1gStcG: any = { width: 40, height: 40, borderRadius: 20, backgroundColor: LibStyle.colorGrey }
const styleId_hTNFf: any = { fontFamily: "Arial", fontSize: 14 }
const styleId_hTxEu: any = { fontFamily: "Arial", fontSize: 12 }
const styleId_Z1nzQPR: any = { marginHorizontal: -15, backgroundColor: '#f5f5f5', marginTop: 10, paddingHorizontal: 15, paddingVertical: 10 }
const styleId_Zrz44M: any = { flexDirection: 'row', alignItems: 'center', marginTop: 5 }
const styleId_Z2mCmbA: any = { fontSize: 14 }
const styleId_Z1fhvD6: any = { color: "#888", fontSize: 12 }
const styleId_ZwGcPJ: any = { color: MarketStyle.colorPrimaryMarket }
const styleId_Z23pPY2: any = { fontFamily: "Arial", fontSize: 12, marginTop: 10 }
const styleId_w3cxJ: any = { fontFamily: "Arial", fontSize: 14, marginTop: 5 }
const styleId_Z1MhN9b: any = { fontFamily: "Arial", fontSize: 14, lineHeight: 20, marginTop: 5 }
const styleId_cIMFY: any = { fontFamily: "Arial", fontSize: 12, marginTop: 10, color: MarketStyle.colorPrimaryMarket, fontWeight: 'bold' }
const styleId_fpbpu: any = { fontFamily: "Arial", fontSize: 14, lineHeight: 20, marginTop: 5 }
const styleId_Z1vhh93: any = { flexDirection: "row", flexWrap: 'wrap', marginTop: 5, paddingBottom: 5 }
const styleId_ZgOh9: any = { borderRadius: 5, marginRight: 10, marginBottom: 10, backgroundColor: LibStyle.colorGrey, alignItems: "center", justifyContent: "center" }
const styleId_Z1IXE93: any = { borderRadius: 5 }
const styleId_Z1ctQzc: any = { marginHorizontal: -15, borderBottomWidth: 1, borderBottomColor: '#f1f1f1', borderTopWidth: 1, borderTopColor: '#f1f1f1', paddingHorizontal: 15, paddingTop: 15, paddingBottom: 5 }
const styleId_12lRXe: any = { flexDirection: "row", alignItems: "center", marginBottom: 10 }
const styleId_Zd5nLD: any = { borderRadius: 5, backgroundColor: LibStyle.colorGrey }
const styleId_Z23pnoR: any = { fontFamily: "Arial", fontSize: 14, paddingBottom: 5 }
const styleId_Z1S7QjE: any = { flexDirection: "row", marginTop: 15 }
const styleId_Z2h27zO: any = { flex: 1, fontFamily: "Arial", fontSize: 14 }
const styleId_1PKjOX: any = { fontFamily: "Arial", fontSize: 14, color: LibStyle.colorRed }
const styleId_Z15JWis: any = { flexDirection: "row", justifyContent: "space-between", marginVertical: 5 }
const styleId_L567G: any = { width: LibStyle.width * 0.5 - 5 }
const styleId_ZWTVYs: any = { marginLeft: 10, paddingHorizontal: 10 }
const styleId_Z1SArsq: any = { color: "white" }
const styleId_HAz6T: any = { marginRight: 10, paddingHorizontal: 10 }
const styleId_1vuOTq: any = { marginHorizontal: 15, marginVertical: 10 }
const styleId_Z25UOiL: any = { backgroundColor: "white", paddingVertical: 10 }
const styleId_Z1atydL: any = { textAlign: 'center', paddingBottom: 10 }
const styleId_Z1gmFFy: any = { marginHorizontal: 17, marginVertical: 5 }