import { useTranslation } from 'react-i18next';
import { TextInput, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { Button, Icon, Text } from '../../../components';
import { tw, useTheme } from '../../../core';
import { InfoTooltip } from './InfoTooltip';

interface TotalCostProps {
  price: number;
  onCalculate?: () => void;
}

export function TotalCost({ onCalculate, price }: TotalCostProps) {
  const { t } = useTranslation();
  const { background, backgroundSemiLight } = useTheme();
  const totalPrice = (price + 1.5).toLocaleString();

  return (
    <View style={tw`flex flex-col gap-2`}>
      <Text style={tw`font-bold`}>{t`marketplace.estimatedGasFees`}</Text>
      <View style={tw`flex-row items-center gap-1 p-2 bg-[#424040] rounded-lg`}>
        <Icon name="label" style={tw`text-[#999797] text-lg`} />
        <TextInput
          style={tw`grow font-bold text-white text-lg`}
          keyboardType="decimal-pad"
          value="$1.50"
          editable={false}
        />
        <InfoTooltip text="Final cost will be calculated on checkout." />
      </View>
      <Text style={tw`font-bold`}>{t`marketplace.estimatedTaxes`}</Text>
      <View style={tw`flex-row items-center gap-1 p-2 bg-[${background}] rounded-lg`}>
        <Icon name="label" color="#999797" size={20} />
        <TextInput value="$ 00.00" style={tw`grow font-bold text-lg`} keyboardType="number-pad" editable={false} />
        <InfoTooltip text="Final cost will be calculated on checkout." />
      </View>
      <View style={tw`flex-row justify-between py-2`}>
        <Text style={tw`font-bold`}>{t`marketplace.estimatedShippingCost`}</Text>
        <Button onPress={onCalculate} style={tw`bg-black/10 border-primary border p-2 rounded-md`} dense>
          <Text style={tw`text-primary text-xs font-bold`}>Calculate Cost</Text>
        </Button>
      </View>
      <LinearGradient
        style={tw`flex-row justify-between bg-[#231F20] py-4 px-4 rounded-xl`}
        colors={[background, backgroundSemiLight]}
        start={{ x: 0.0, y: 0.0 }}
        end={{ x: 1.0, y: 1.0 }}>
        <Text style={tw`text-xs`}>{t`marketplace.totalSellingPrice`}</Text>
        <View style={tw`flex-row gap-2`}>
          <Icon name="lock-label" size={27} color="#80C342" />
          <Text style={tw`text-lg font-bold`}>$ {totalPrice}</Text>
        </View>
      </LinearGradient>
    </View>
  );
}