import { Text, View } from "react-native";
import React from "react";
import { DetailContainer } from "@src/commonComponent";
import { external } from "../../../../../../styles/externalStyle";
import { styles } from "./styles";
import { useValues } from "@src/utils/context/index";
import { commonStyles } from "../../../../../../styles/commonStyle";
import { appColors, appFonts, fontSizes, windowHeight } from "@src/themes";
import { BillDetailsInterface } from "@src/api/interface/rideRequestInterface";
import { useSelector } from "react-redux";

interface BillDetailsProps {
  billDetail?: BillDetailsInterface | any;
}

export function BillDetails({ billDetail }: BillDetailsProps) {
  const { textColorStyle, textRTLStyle, viewRTLStyle, isDark } = useValues();
  const { translateData } = useSelector((state: any) => state.setting);



  return (
    <View>
      <View style={styles.viewHeder}>
        <Text
          style={[
            styles.billSummary,
            { color: textColorStyle, textAlign: textRTLStyle },
          ]}
        >
          {translateData.billSummary}
        </Text>
        {billDetail?.ride_fare > 0 && (
          <View style={[external.mv_5]}>
            <DetailContainer
              value={[
                billDetail?.currency_symbol,
                Number(billDetail?.ride_fare).toFixed(2),
              ]}
              title={translateData.baseFare}
            />
          </View>
        )}
        {billDetail?.additional_distance_charge > 0 && (
          <View style={[external.mv_5]}>
            <DetailContainer
              value={[
                billDetail?.currency_symbol,
                Number(billDetail?.additional_distance_charge).toFixed(2),
              ]}
              title={translateData.additionalFare}
            />
          </View>
        )}
        {billDetail?.vehicle_rent > 0 && (
          <View style={[external.mv_5]}>
            <DetailContainer
              value={[
                billDetail?.currency_symbol,
                Number(billDetail?.vehicle_rent).toFixed(2),
              ]}
              title={translateData.vehicleFare}
            />
          </View>
        )}
        {billDetail?.additional_minute_charge > 0 && (
          <View style={[external.mv_5]}>
            <DetailContainer
              value={[
                billDetail?.currency_symbol,
                Number(billDetail?.additional_minute_charge).toFixed(2),
              ]}
              title={translateData.timeFare}
            />
          </View>
        )}
        {billDetail?.additional_weight_charge > 0 && (
          <View style={[external.mv_5]}>
            <DetailContainer
              value={[
                billDetail?.currency_symbol,
                Number(billDetail?.additional_weight_charge).toFixed(2),
              ]}
              title={translateData.weightFare}
            />
          </View>
        )}
        {billDetail?.total_extra_charge > 0 && (
          <View style={[external.mv_5]}>
            <DetailContainer
              value={[
                billDetail?.currency_symbol,
                Number(billDetail?.total_extra_charge).toFixed(2),
              ]}
              title={translateData.extra_charges || "Extra Charges"}
            />
          </View>
        )}
        {billDetail?.bid_extra_amount > 0 && (
          <View style={[external.mv_5]}>
            <DetailContainer
              value={[
                billDetail?.currency_symbol,
                Number(billDetail?.bid_extra_amount).toFixed(2),
              ]}
              title={translateData.bidFare}
            />
          </View>
        )}
        {billDetail?.commission > 0 && (
          <View style={[external.mv_5]}>
            <DetailContainer
              value={[
                billDetail?.currency_symbol,
                Number(billDetail?.commission).toFixed(2),
              ]}
              title={translateData.commission}
            />
          </View>
        )}
        {billDetail?.tax > 0 && (
          <View style={[external.mv_5]}>
            <DetailContainer
              value={[
                billDetail?.currency_symbol,
                Number(billDetail?.tax).toFixed(2),
              ]}
              title={translateData.tax}
            />
          </View>
        )}
        {billDetail?.driver_tips > 0 && (
          <View style={[external.mv_5]}>
            <DetailContainer
              value={[
                billDetail?.currency_symbol,
                Number(billDetail?.driver_tips).toFixed(2),
              ]}
              title={translateData.tip}
            />
          </View>
        )}
        {billDetail?.platform_fees > 0 && (
          <View
            style={[
              external.js_space,
              external.ai_center,
              external.mt_5,
              { flexDirection: viewRTLStyle },
            ]}
          >
            <Text
              style={[commonStyles.regularText, { textAlign: textRTLStyle }]}
            >
              {translateData.platformFees}
            </Text>
            <Text
              style={[
                commonStyles.regularText,
                {
                  color: isDark ? appColors.whiteColor : appColors.primaryText,
                  textAlign: textRTLStyle,
                },
              ]}
            >
              {billDetail?.currency_symbol}
              {Number(billDetail?.platform_fees).toFixed(2)}
            </Text>
          </View>
        )}
      </View>
      <View
        style={[
          styles.container,
          {
            backgroundColor: isDark
              ? appColors.solidBorder
              : appColors.lightGray,
          },
        ]}
      />
      <View
        style={[styles.detailContainerText, { marginBottom: windowHeight(10) }]}
      >
        <View
          style={[
            ,
            external.js_space,
            external.ai_center,
            { flexDirection: viewRTLStyle },
          ]}
        >
          <Text style={[commonStyles.regularText, { textAlign: textRTLStyle }]}>
            {translateData.totalBill}
          </Text>
          <Text
            style={[
              commonStyles.regularText,
              {
                color: appColors.price,
                textAlign: textRTLStyle,
                fontSize: fontSizes.FONT19,
                fontFamily: appFonts.semiBold,
              },
            ]}
          >
            {billDetail?.currency_symbol}
            {Number(billDetail?.total).toFixed(2)}
          </Text>
        </View>
      </View>
    </View>
  );
}
