// withHooks
import { applyStyle } from 'esoftplay';
import { EventRating } from 'esoftplay/cache/event/rating/import';
import { EventReviewProperty } from 'esoftplay/cache/event/review/import';
import { LibNavigation } from 'esoftplay/cache/lib/navigation/import';
import { LibPicture } from 'esoftplay/cache/lib/picture/import';
import { LibUtils } from 'esoftplay/cache/lib/utils/import';
import { UserClass } from 'esoftplay/cache/user/class/import';
import esp from 'esoftplay/esp';

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


export interface EventOrder_detail_reviewArgs {

}
export interface EventOrder_detail_reviewProps {
  dataReview: any
  dataTicket: any
}
export default function m(props: EventOrder_detail_reviewProps): any {
  const [user] = UserClass.state().useState()
  const dataReview = props.dataReview
  const result = props.dataTicket

  let startEvent = result?.start_date + " " + result?.start_time
  let dateNow = LibUtils.moment().localeFormat("YYYY-MM-DD HH:mm")

  function getStringReview(data: any) {
    const groupedData = data.reduce((acc: any[], obj: any) => {
      const { survey_id, survey_question, survey_option, content } = obj;

      if (!acc[survey_id]) {
        acc[survey_id] = {
          survey_id,
          survey_question,
          values: []
        };
      }

      if (survey_option) {
        acc[survey_id].values.push(survey_option);
      }
      if (content) {
        acc[survey_id].values.push(content);
      }

      return acc;
    }, {});

    const finalResult = Object.values(groupedData).map((group: any) => {
      const { survey_question, values } = group;
      const valuesString = values.join(", ");
      return `\nQ: ${survey_question}\nA: ${valuesString}`;
    })
    return finalResult
  }


  const ReviewCard = ({ user, dataReview }: any) => {
    return (
      <View style={{ margin: 15, marginBottom: 0, borderRadius: 7, backgroundColor: 'white', padding: 10 }}>
        <View style={{ flexDirection: 'row', alignItems: 'flex-start', marginTop: 10 }}>
          <LibPicture source={{ uri: user?.image }} style={{ height: 50, width: 50, borderRadius: 25 }} />
          <View style={{ marginLeft: 10, flex: 1 }}>
            <Text allowFontScaling={false} numberOfLines={1} ellipsizeMode='tail' style={{ fontSize: 16, fontWeight: 'bold' }}>{user?.name}</Text>
            <Text allowFontScaling={false} style={{ fontSize: 12, color: '#c9c9c9' }}>{LibUtils.moment(dataReview?.review?.created).localeFormat("D MMM YYYY")}</Text>
            <View style={{ marginTop: 5 }}>
              <EventRating disabled onChangeRating={() => { }} defaultValue={dataReview?.review?.rating} size={18} containerStyle={{ padding: 0, justifyContent: 'flex-start' }} />
              {
                dataReview?.review?.content != "" &&
                <Text allowFontScaling={false} style={{ marginTop: 10, fontSize: 12, color: '#000' }}>{dataReview?.review?.content.replace(/\\n/g, '\n')}</Text>
              }
              {
                dataReview?.surveys?.length > 0 &&
                getStringReview(dataReview?.surveys).map((sur) => (
                  <Text allowFontScaling={false} style={{ fontSize: 12, color: '#000' }}>{sur}</Text>
                ))
              }
            </View>
          </View>
        </View>
        {
          dataReview?.status == 2 &&
          <View style={applyStyle({ borderColor: '#FC9722', backgroundColor: '#FDF1DE', borderWidth: 1, borderStyle: 'dashed', borderRadius: 5, padding: 5, marginTop: 15, marginBottom: 0 })} >
            <Text allowFontScaling={false} style={applyStyle({ fontFamily: "Arial", fontSize: 12, fontStyle: "normal", letterSpacing: 0, color: "#4a4a4a" })}>{esp.lang("event/order_detail", "thanks")}</Text>
          </View>
        }
      </View>
    )
  }

  const ReviewForm = ({ result, onRate }: any) => {
    return (
      <Pressable>
        <EventRating
          onChangeRating={onRate}
          defaultValue={5}
          size={50}
          containerStyle={{ padding: 0, backgroundColor: 'transparent' }}
        />
        <Text style={{ alignSelf: 'center', marginTop: 15, fontSize: 18, fontWeight: 'bold', color: '#fff' }}>{esp.lang("event/order_detail", "leave_review")}</Text>
        <Text style={{ alignSelf: 'center', marginTop: 7, fontSize: 14, color: '#fff' }}>{esp.lang("event/order_detail", "review_info")}</Text>
      </Pressable>
    )
  }

  const ReviewedResult = ({ user, dataReview }: any) => {
    return (
      <View style={{ margin: -10, backgroundColor: '#fff', padding: 10, borderRadius: 7 }}>
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <LibPicture source={{ uri: user?.image }} style={{ height: 50, width: 50, borderRadius: 25 }} />
          <View style={{ marginLeft: 10 }}>
            <Text numberOfLines={1} style={{ fontSize: 16, fontWeight: 'bold' }}>{user?.name}</Text>
            <Text style={{ fontSize: 12, color: '#c9c9c9' }}>{LibUtils.moment(dataReview?.review?.created).localeFormat("D MMM YYYY")}</Text>
            <EventRating
              disabled
              defaultValue={dataReview?.review?.rating}
              onChangeRating={() => { }}
              size={18}
              containerStyle={{ padding: 0 }}
            />
          </View>
        </View>
        <Text numberOfLines={5} style={{ marginTop: 10, fontSize: 12 }}>{dataReview?.review?.content}</Text>
      </View>
    )
  }

  return (
    <View>
      {
        dataReview?.status == 1 &&
        <ReviewCard
          user={user}
          dataReview={dataReview}
        />
      }
      {
        dataReview?.status != 1 && dateNow > startEvent && (
          <View style={{ margin: 15, borderRadius: 7, backgroundColor: '#000', padding: 10 }}>
            {
              dataReview?.review == null ?
                <ReviewForm
                  result={result}
                  onRate={(rate: any) => {
                    let type = EventReviewProperty.calculateProb(result?.config?.review)
                    let args = {
                      url_form: "event_order_detail_review_form?id=" + result?.id + "&type=" + type?.type,
                      type: type?.type,
                      booking_id: result?.id,
                      rate: rate
                    }

                    if (result?.review_status != 1) {
                      LibNavigation.navigate('event/review_add', args)
                    }

                  }}
                />
                :
                <ReviewedResult
                  user={user}
                  dataReview={dataReview}
                />
            }
          </View>
        )
      }

    </View>
  )
}