import React from 'react';
import { View, Text, ScrollView, TouchableOpacity, Image } from 'react-native';
import ActionSheet, { ActionSheetRef } from 'react-native-actions-sheet';
import { API_HOST } from 'src/constants';
import { Colors } from 'src/theme';
import { getFontSize } from 'src/utils';
import TransitSvg from 'assets/icons/transit.svg';

type SummaryItem = {
  id: number;
  name: string;
  days: number;
  flag1: string;
  flag2: string | null;
  transit?: boolean;
};

type Props = {
  summary: {
    totalDays: number;
    perRegion: SummaryItem[];
  };
  onConfirm: () => void;
  onClose: () => void;
};

const SummarySheet = React.forwardRef<ActionSheetRef, Props>(
  ({ summary, onConfirm, onClose }, ref) => {
    return (
      <ActionSheet
        ref={ref}
        onClose={onClose}
        containerStyle={{
          paddingHorizontal: '5%',
          paddingTop: 20,
          borderTopLeftRadius: 15,
          borderTopRightRadius: 15,
          maxHeight: '90%'
        }}
      >
        <ScrollView
          showsVerticalScrollIndicator={false}
          contentContainerStyle={{ paddingBottom: 12 }}
        >
          <Text
            style={{
              fontSize: 16,
              fontWeight: '700',
              marginBottom: 12,
              textAlign: 'center',
              color: Colors.DARK_BLUE
            }}
          >
            Trip Summary
          </Text>

          <Text
            style={{
              fontSize: 14,
              marginBottom: 16,
              textAlign: 'center',
              fontFamily: 'montserrat-700',
              color: Colors.DARK_BLUE
            }}
          >
            {summary.totalDays} days travelled
          </Text>

          {summary.perRegion.map((r, index) => (
            <View
              key={`${r.id}-${index}`}
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                marginBottom: 12,
                justifyContent: 'space-between',
                gap: 6
              }}
            >
              <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center', flex: 1 }}>
                <Image
                  source={{
                    uri: API_HOST + '/img/flags_new/' + r?.flag1
                  }}
                  style={{
                    width: 32,
                    height: 32,
                    borderRadius: 32 / 2,
                    borderWidth: 1,
                    borderColor: Colors.FILL_LIGHT
                  }}
                />
                {r?.flag2 ? (
                  <Image
                    source={{ uri: API_HOST + '/img/flags_new/' + r.flag2 }}
                    style={[
                      {
                        width: 32,
                        height: 32,
                        borderRadius: 32 / 2,
                        borderWidth: 1,
                        borderColor: Colors.FILL_LIGHT,
                        marginLeft: -18
                      }
                    ]}
                  />
                ) : null}
                <View style={{ flexShrink: 1 }}>
                  <Text style={{ fontSize: 12, fontWeight: '600', color: Colors.DARK_BLUE }}>
                    {r.name}
                  </Text>
                </View>
              </View>

              {r.transit ? (
                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
                  {r.days > 1 ? (
                    <Text style={{ fontSize: 13, fontWeight: '600', color: Colors.DARK_BLUE }}>
                      {r.days}
                    </Text>
                  ) : null}
                  <TransitSvg fill={Colors.DARK_BLUE} height={20} width={20} />
                </View>
              ) : (
                <Text style={{ fontSize: 13, fontWeight: '600', color: Colors.DARK_BLUE }}>
                  {r.days} {r.days === 1 ? 'day' : 'days'}
                </Text>
              )}
            </View>
          ))}
        </ScrollView>

        <View
          style={{
            paddingBottom: 24,
            justifyContent: 'flex-end',
            gap: 6
          }}
        >
          <TouchableOpacity
            style={{
              backgroundColor: Colors.ORANGE,
              borderWidth: 1,
              borderColor: Colors.ORANGE,
              borderRadius: 4,
              alignItems: 'center',
              justifyContent: 'center',
              paddingHorizontal: 16,
              paddingVertical: 12
            }}
            onPress={onConfirm}
          >
            <Text
              style={{
                fontSize: getFontSize(14),
                fontWeight: 'bold',
                fontFamily: 'redhat-700',
                color: Colors.WHITE
              }}
            >
              Confirm
            </Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={{
              backgroundColor: Colors.WHITE,
              borderWidth: 1,
              borderColor: Colors.DARK_BLUE,
              borderRadius: 4,
              alignItems: 'center',
              justifyContent: 'center',
              paddingHorizontal: 16,
              paddingVertical: 12
            }}
            onPress={() => (ref as React.RefObject<ActionSheetRef>).current?.hide()}
          >
            <Text
              style={{
                color: Colors.DARK_BLUE,
                fontSize: getFontSize(14),
                fontWeight: 'bold',
                fontFamily: 'redhat-700'
              }}
            >
              Cancel
            </Text>
          </TouchableOpacity>
        </View>
      </ActionSheet>
    );
  }
);

export default SummarySheet;
