// withHooks
import { EventMessage } from 'esoftplay/cache/event/message/import';
import { EventStep } from 'esoftplay/cache/event/step/import';
import { LibCollaps } from 'esoftplay/cache/lib/collaps/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 React from 'react';
import { Text, View } from 'react-native';


export interface EventOrder_detail_tncArgs {

}
export interface EventOrder_detail_tncProps {
  dataTicket: any
}
export default function m(props: EventOrder_detail_tncProps): any {
  let result = props?.dataTicket

  function renderTermItem(item: any, i: number) {
    return (
      <View key={i} style={{ marginTop: 10 }}>
        <EventStep text={item} />
      </View>
    )
  }

  return (
    <View style={{ backgroundColor: '#fff', marginTop: 1, borderRadius: 7, overflow: 'hidden', marginHorizontal: 15, marginBottom: 0 }}>
      <LibCurl_view
        url={result?.url_term}
        onSuccess={(res, msg): any => {
          if (Array.isArray(res)) {
            return (
              <View>
                {res?.map(renderTermItem)}
              </View>
            )
          } else {
            return (
              <View>
                {
                  Object.entries(res).map(([title, items]: any) => {
                    return (
                      <View key={title}>
                        <LibCollaps header={(show) =>
                          <View style={{ padding: 15, paddingRight: 25, paddingLeft: 20, paddingBottom: 10, borderBottomWidth: 1, borderColor: LibStyle.colorBgGrey, alignContent: 'center', alignItems: 'center', borderRadius: 7, backgroundColor: '#f9f9f9', flexDirection: 'row' }}>
                            <View style={{ flex: 1 }}>
                              <Text allowFontScaling={false} style={{ fontFamily: "Arial", fontSize: 12, fontWeight: "bold", fontStyle: "normal", letterSpacing: 1.5, color: "#495057" }}>{title}</Text>
                            </View>
                            <LibIcon name={!show ? "chevron-down" : "chevron-up"} color='#495057' />
                          </View>
                        }>
                          {items.map(renderTermItem)}
                        </LibCollaps>
                      </View>
                    )
                  })
                }
              </View>
            )
          }
        }}
        onError={(err) => {
          return (
            <EventMessage
              message={err?.message}
            />
          )
        }}
      />
    </View>
  )
}