import { View, Text, ScrollView, Image } from 'react-native'
import React from 'react'
import { Button, Header } from '../../../commonComponents'
import { useDispatch, useSelector } from 'react-redux'
import { styles } from './styles'
import appColors from '../../../theme/appColors'
import { useValues } from '../../../utils/context'
import Images from '../../../utils/images/images'
import { useNavigation, useTheme } from '@react-navigation/native'
import Icons from '../../../utils/icons/icons'
import CalanderSmall from '../../../assets/icons/caladerSmall'
import Clock from '../../../assets/icons/clock'
import {
  fontSizes,
  windowHeight,
  windowWidth,
} from '../../../theme/appConstant'
import { acceptRequestValue } from '../../../api/store/action'
import appFonts from '../../../theme/appFonts'

export function RideInfo({ route }) {
  const { ride, status } = route.params || {}
  const { translateData, settingData, taxidoSettingData } = useSelector(
    state => state.setting,
  )
  const { viewRtlStyle, isDark, rtl } = useValues()
  const { colors } = useTheme()
  const { zoneValue } = useSelector(state => state.zoneUpdate)
  const { navigate } = useNavigation()
  const dispatch = useDispatch()

  const date = new Date(ride?.created_at)

  const day = date.getDate()
  const month = date.toLocaleString('en-US', { month: 'short' })
  const year = date.getFullYear()

  const formattedDate = `${day} ${month}’${year}`

  const timeOptions = { hour: 'numeric', hour12: true }
  const formattedTime = date.toLocaleTimeString('en-US', timeOptions)

  const gotoRide = ride => {
    if (ride?.service_category?.service_category_type === 'rental') {
      navigate('RentalDetails', { ride })
    } else {
      navigate('Ride', { ride })
    }
  }



  const statusMapping = {
    accepted: {
      text: `${translateData.pendingRide}`,
      color: appColors.completeColor,
      backgroundColor: appColors.lightYellow,
    },
    started: {
      text: `${translateData.active}`,
      color: appColors.activeColor,
      backgroundColor: appColors.lightGreen,
    },
    schedule: {
      text: `${translateData.scheduled}`,
      color: appColors.scheduleColor,
      backgroundColor: appColors.lightPink,
    },
    cancelled: {
      text: `${translateData.cancel}`,
      color: appColors.alertRed,
      backgroundColor: appColors.lightOrange,
    },
    completed: {
      text: `${translateData.completed}`,
      color: appColors.primary,
      backgroundColor: appColors.cardicon,
    },
  }

  const currentStatus = statusMapping[status] || {
    text: 'Requested',
    color: appColors.primaryFont,
    backgroundColor: '',
  }

  return (
    <View style={styles.container}>
      <Header
        title={`${ride?.service?.name}  ${translateData.rideInfoHeaderDetails}`}
        style={styles.gap}
      />
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={styles.detailContainer}>
          <View
            style={[
              styles.profileContainer,
              { backgroundColor: colors.card, borderColor: colors.border },
            ]}
          >
            <View
              style={[styles.priceContainer, { flexDirection: viewRtlStyle }]}
            >
              <View style={{ flexDirection: viewRtlStyle }}>
                <View
                  style={[styles.box, { backgroundColor: colors.background }]}
                >
                  <Image
                    source={{ uri: ride?.vehicle_type?.vehicle_image_url }}
                    style={styles.carLogo}
                  />
                </View>

                <View style={{ width: '60%' }}>
                  <View
                    style={[
                      styles.rideNoContainer,
                      { backgroundColor: colors.background },
                    ]}
                  >
                    <Text
                      style={[
                        styles.price1,
                        { color: isDark ? appColors.white : appColors.black },
                      ]}
                    >
                      #{ride?.ride_number}
                    </Text>
                  </View>
                  <View
                    style={{
                      flexDirection: viewRtlStyle,
                      alignItems: 'center',
                      marginHorizontal: windowWidth(2),
                    }}
                  >

                    <View style={styles.timeView}>
                      <CalanderSmall />
                      <Text style={styles.createDate}>{formattedDate}</Text>
                    </View>
                    <View
                      style={[
                        styles.timeView,
                        { marginHorizontal: windowWidth(2) },
                      ]}
                    >
                      <Clock />
                      <Text style={styles.createDate}>{formattedTime}</Text>
                    </View>
                  </View>
                </View>
              </View>

              <View>
                <Text style={[styles.price]}>
                  {ride?.currency_symbol}
                  {ride?.total}
                </Text>
              </View>
            </View>
            <View
              style={[
                styles.containerPrice,
                {
                  backgroundColor: colors.background,
                },
              ]}
            />

            <View style={[styles.profileView, { flexDirection: viewRtlStyle }]}>
              <View style={[styles.starView, { flexDirection: viewRtlStyle }]}>
                <View
                  style={[
                    styles.profile,
                    {
                      backgroundColor: isDark
                        ? appColors.white
                        : appColors.black,
                    },
                  ]}
                >
                  <Text
                    style={{
                      fontFamily: appFonts.semiBold,
                      fontSize: fontSizes.FONT5s,
                      color: isDark ? appColors.black : appColors.white,
                    }}
                  >
                    {ride?.rider?.name?.charAt(0)?.toUpperCase()}
                  </Text>
                </View>
                <View style={styles.riderContainer}>
                  <Text
                    style={[
                      styles.name,
                      {
                        color: isDark ? appColors.white : appColors.primaryFont,
                      },
                    ]}
                  >
                    {ride?.rider?.name}
                  </Text>
                </View>
              </View>
              <View style={styles.tag}>
                <Text style={styles.tagTitle}>
                  {currentStatus.text || `${translateData.requested}`}
                </Text>
              </View>
            </View>

            <View
              style={[
                styles.containerPrice,
                {
                  backgroundColor: colors.background,
                },
              ]}
            />
            <View>
              <View
                style={{
                  flexDirection: viewRtlStyle,
                  alignItems: 'center',
                  marginHorizontal: windowWidth(3),
                }}
              >
                <View
                  style={[styles.round, { backgroundColor: colors.background }]}
                >
                  <Icons.location color={colors.text} />
                </View>
                <Text
                  style={[styles.locationName, { color: appColors.iconColor }]}
                >
                  {ride?.locations?.[0]?.length > 28
                    ? ride.locations[0].substring(0, 28) + '...'
                    : ride.locations[0]}
                </Text>
              </View>

              <View style={[styles.verticalDot, { alignSelf: rtl ? 'flex-end' : 'flex-start' }]} />
              <View
                style={[
                  styles.round1,
                  { borderColor: colors.border, backgroundColor: colors.card, alignSelf: rtl ? 'flex-start' : 'flex-end' },
                ]}
              >
                <Text
                  style={{
                    fontSize: fontSizes.FONT2HALF,
                    color: appColors.iconColor,
                  }}
                >
                  {ride?.distance}
                </Text>
                <Text
                  style={{
                    fontSize: fontSizes.FONT2HALF,
                    color: appColors.iconColor,
                  }}
                >
                  {ride?.distance_unit}
                </Text>
              </View>
              {ride.locations[1] && (
                <View>
                  <View
                    style={[
                      styles.dropOffBorder,
                      {
                        borderBottomColor: isDark
                          ? appColors.darkborder
                          : appColors.border,
                        alignSelf: rtl ? 'flex-start' : 'flex-end'
                      },
                    ]}
                  />

                  <View
                    style={{
                      flexDirection: viewRtlStyle,
                      alignItems: 'center',
                      marginHorizontal: windowWidth(3),
                    }}
                  >
                    <View
                      style={[
                        styles.round,
                        { backgroundColor: colors.background },
                      ]}
                    >
                      <Icons.gps color={colors.text} />
                    </View>
                    <Text
                      style={[
                        styles.locationName,
                        {
                          color: isDark
                            ? appColors.iconColor
                            : appColors.iconColor,
                        },
                      ]}
                    >
                      {ride?.locations?.[1]?.length > 28
                        ? ride.locations[1].substring(0, 28) + '...'
                        : ride.locations[1]}
                    </Text>
                  </View>
                </View>
              )}
            </View>
          </View>

          {ride?.service_category?.service_category_type === 'schedule' && (
            <View
              style={[styles.rentalContainer, { flexDirection: viewRtlStyle }]}
            >
              <View style={styles.containerSchedule}>
                <Text style={styles.startTime}>{translateData.startDate}</Text>
                <View
                  style={[
                    styles.scheduleClock,
                    { flexDirection: viewRtlStyle },
                  ]}
                >
                  <CalanderSmall />
                  <Text style={styles.formattedDateText}>
                    {' '}
                    {formattedDate?.date}
                  </Text>
                </View>
              </View>
              <View
                style={[styles.rentalBorder, { borderColor: colors.border }]}
              />
              <View style={styles.containerSchedule}>
                <Text style={styles.startTime}>{translateData.startTime}</Text>
                <View
                  style={[
                    styles.scheduleClock,
                    { flexDirection: viewRtlStyle },
                  ]}
                >
                  <Clock />
                  <Text style={styles.formattedDateText}>
                    {' '}
                    {formattedDate?.time}
                  </Text>
                </View>
              </View>
            </View>
          )}

          {ride?.service_category?.service_category_type === 'package' && (
            <View
              style={[styles.rentalContainer, { flexDirection: viewRtlStyle }]}
            >
              <View style={styles.containerSchedule}>
                <Text style={styles.startTime}>KM</Text>
                <View
                  style={[
                    styles.scheduleClock,
                    { flexDirection: viewRtlStyle },
                  ]}
                >
                  <Text style={styles.formattedDateText}>
                    {' '}
                    {ride?.hourly_packages?.distance}{' '}
                    {ride?.hourly_packages?.distance_type}
                  </Text>
                </View>
              </View>
              <View
                style={[styles.rentalBorder, { borderColor: colors.border }]}
              />
              <View style={styles.containerSchedule}>
                <Text style={styles.startTime}>{translateData.time}</Text>
                <View
                  style={[
                    styles.scheduleClock,
                    { flexDirection: viewRtlStyle },
                  ]}
                >
                  <Text style={styles.formattedDateText}>
                    {' '}
                    {ride?.hourly_packages?.hour} {translateData.hour}
                  </Text>
                </View>
              </View>
            </View>
          )}

          {ride?.service?.service_type === 'package' ||
            ride?.service?.service_type === 'freight' ||
            (ride?.service?.service_type === 'parcel' && (
              <View
                style={[
                  styles.packageContainer,
                  {
                    backgroundColor: isDark
                      ? appColors.primaryFont
                      : appColors.white,
                    borderColor: isDark
                      ? appColors.darkborder
                      : appColors.border,
                  },
                ]}
              >
                <Image
                  source={{ uri: ride?.cargo_image_url }}
                  style={styles.vehicleLogo}
                />

                <Text style={[styles.packageDescription, { textAlign: rtl ? 'right' : 'left' }]}>
                  {ride?.description}
                </Text>
              </View>
            ))}
        </View>
      </ScrollView>
      {ride?.service?.service_type === 'rental' && (
        <View style={styles.acceptBtn}>
          <Button
            title="Accept"
            backgroundColor={appColors.primary}
            color={appColors.white}
            onPress={() => gotoRide(ride)}
          />
        </View>
      )}
      {(taxidoSettingData?.cabbooking_values?.activation?.bidding == 1 &&
        ride?.service?.service_type === 'freight') ||
        ride?.service?.service_type === 'parcel' ? (
        <View style={styles.acceptBtn}>
          <Button
            title={translateData?.placebid}
            backgroundColor={isDark ? appColors.white : appColors.black}
            color={isDark ? appColors.black : appColors.white}
            onPress={() => gotoRide(ride)}
          />
        </View>
      ) : (
        <View style={styles.acceptBtn}>
          <Button
            title={translateData?.accept}
            backgroundColor={isDark ? appColors.white : appColors.black}
            color={isDark ? appColors.black : appColors.white}
            color={appColors.white}
            onPress={() => gotoRide(ride)}
          />
        </View>
      )}
    </View>
  )
}
