import React, { useState, useRef, useEffect } from 'react';
import styled from 'styled-components';
import { useCallFeed } from '../hooks/useCallFeed';
import { router } from 'expo-router';
import { Platform, Linking, View, ScrollView, Text, TouchableOpacity } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { SafeAreaView } from 'react-native-safe-area-context';
import {
    PageHeader,
    PageFooter,
} from '../components/generalHelpers.jsx';
import { Ionicons } from '@expo/vector-icons';
import { AccidentAndEmergency } from "healthicons-react-native/dist/outline";
import ActionSheet from 'react-native-actions-sheet';

const DepartmentActionSheet = styled(ActionSheet)``;

export default function Incidents() {
    const actionSheetRef = useRef(null);
    const callFeed = useCallFeed();

    const {
        departments,
        callIconMap,
        callDetails,
        callColorSelector,
        formatCallTimePast,
        formatCallDateTime
    } = callFeed;

    const sortedAndFilteredCalls = callDetails
        .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
        .filter((item, index, self) => {
            return index === self.findIndex(i => {
                return `${i?.data?.Incident?.IncID}${i?.data?.Response?.ServiceName}` === `${item?.data?.Incident?.IncID}${item?.data?.Response?.ServiceName}`
            });
        });

    const {
        departmentTypeMap,
        accountDetails,
        deptList,
        setDeptList,
        selectedDepartment,
        setSelectedDepartment,
        updateSelectedDepartment,
        selectedDepartmentColorPicker,
    } = departments;

    return (
        <React.Fragment>
            <PageHeader>
                <View 
                    style={{ 
                        flexDirection: 'column', 
                        height: 80, 
                        alignItems: 'center', 
                        justifyContent: 'flex-end',
                        paddingBottom: 7
                    }}
                >
                    <TouchableOpacity
                        style={{
                            borderRadius: 6,
                            elevation: 3,
                            backgroundColor: '#fff',
                            shadowOffset: { width: 0, height: 0 },
                            shadowColor: '#333',
                            shadowOpacity: .8,
                            shadowRadius: 2,
                            paddingHorizontal: 10,
                            paddingVertical: 2,
                        }}
                        onPress={() => {
                            actionSheetRef.current?.show();
                        }}
                    >
                        <Text 
                            style={{ 
                                color: selectedDepartmentColorPicker(selectedDepartment?.type), 
                                fontWeight: 600, 
                                fontSize: 14
                            }}
                        >
                            {selectedDepartment?.deptAbv}
                        </Text>
                    </TouchableOpacity>
                </View>
            </PageHeader>
            <ScrollView>
                <StatusBar style="dark" />
                <SafeAreaView />
                <View style={{ flexDirection: 'column', padding: 20 }}>
                    {sortedAndFilteredCalls?.length ? (
                        sortedAndFilteredCalls?.map((callItem, index) => {
                        const { data: call, timestamp } = callItem;
                        const { Incident, Address, Response } = call;
                        const {
                            ServiceNumber,
                            IncDate,
                            IncNature,
                            IncNatureCode,
                            IncNatureCodeDesc,
                            Status,
                        } = Incident;
                        const {
                            StreetAddress,
                            AddressApartment,
                            Town,
                            State,
                            LocationName,
                        } = Address;
                        const {
                            ServiceName
                        } = Response;
                        const SelectedIcon = callIconMap[IncNature] || AccidentAndEmergency;
                        return (
                            <TouchableOpacity 
                                key={`callDetails - ${timestamp}`} 
                                style={{ padding: 2 }}
                                onPress={() => {
                                    router.push({
                                        pathname: '/call',
                                        params: {
                                          callDetails: btoa(JSON.stringify(call))
                                        }
                                    })
                                }}
                            >
                                <View 
                                    style={{
                                        borderRadius: 12,
                                        elevation: 3,
                                        backgroundColor: '#fff',
                                        shadowOffset: { width: 0, height: 0 },
                                        shadowColor: callColorSelector(
                                            IncNatureCode, 
                                            IncNature,
                                            Status
                                        ),
                                        shadowOpacity: 1,
                                        shadowRadius: 5,
                                        padding: 10,
                                    }}
                                >
                                    <View style={{ flexDirection: 'column' }}>
                                        <View key="callDateAndTime"
                                            style={{ 
                                                paddingBottom: 6,
                                                flexDirection: 'row', 
                                                justifyContent: 'space-between' 
                                            }}
                                        >
                                            <Text style={{ fontSize: 12 }}>{formatCallDateTime(IncDate)}</Text>
                                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                                <Text style={{ fontSize: 12 }}>{formatCallTimePast(IncDate)}</Text>
                                                {Status === 'CLOSED' ? (
                                                    <Ionicons
                                                        name="lock-closed-outline"
                                                        color='red'
                                                        style={{
                                                            shadowColor: 'black', 
                                                            shadowOffset: 0,
                                                            shadowOpacity: 1, 
                                                            shadowRadius: 10
                                                        }}
                                                    />
                                                ) : null}
                                            </View>
                                        </View>
                                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                                            <SelectedIcon 
                                                color={callColorSelector(
                                                    IncNatureCode, 
                                                    IncNature,
                                                    Status
                                                )} 
                                                opacity={0.3} 
                                                width={56} 
                                                height={56}
                                            />
                                            <View style={{ flexDirection: 'column' }}>
                                                {LocationName ? (
                                                    <Text 
                                                        style={{ 
                                                            color: 'black', 
                                                            fontWeight: 600, 
                                                            fontSize: 16 
                                                        }}
                                                    >
                                                        {`${LocationName}`}
                                                    </Text>
                                                ) : (
                                                    <View style={{ flexDirection: 'row' }}>
                                                        <Text 
                                                            style={[{
                                                                color: 'black',
                                                                fontSize: 12, 
                                                                fontWeight: 600
                                                            }]}
                                                        >
                                                            {`${StreetAddress}`}
                                                        </Text>
                                                        {AddressApartment ? (
                                                            <Text 
                                                                style={[{
                                                                    color: 'black',
                                                                    fontSize: 12, 
                                                                    fontWeight: 600
                                                                }]}
                                                            >
                                                                {` - ${AddressApartment}`}
                                                            </Text>
                                                        ) : null }
                                                        <Text 
                                                            style={[{
                                                                color: 'black',
                                                                fontSize: 12, 
                                                                fontWeight: 600
                                                            }]}
                                                        >
                                                            {` ${Town}, ${State}`}
                                                        </Text>
                                                    </View>
                                                )}
                                                <Text 
                                                    style={{ 
                                                        color: 'black', 
                                                        fontWeight: 600, 
                                                        fontSize: 16 
                                                    }}
                                                >
                                                    {`${IncNature}`}
                                                </Text>
                                                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                                                    <Text 
                                                        style={{ 
                                                            color: 'black', 
                                                            fontSize: 12, 
                                                            textShadowColor: callColorSelector(
                                                                IncNatureCode, 
                                                                IncNature,
                                                                Status
                                                            ), 
                                                            textShadowRadius: 1 
                                                        }}
                                                    >
                                                        {`${IncNatureCodeDesc}`}
                                                    </Text>
                                                </View>
                                            </View>
                                            <View style={{ padding: 0 }}>
                                                <View>
                                                    <Ionicons name="chevron-forward-outline" />
                                                </View>
                                            </View>
                                        </View>
                                        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                                            <Text
                                                style={{ 
                                                    fontSize: 12,
                                                }}
                                            >
                                                Service: {ServiceName}
                                            </Text>
                                            <Text
                                                style={{
                                                    fontSize: 12,
                                                    textAlign: 'right'
                                                }}
                                            >
                                                {`Incident #: ${ServiceNumber}`}
                                            </Text>
                                        </View>
                                    </View>
                                </View>
                            </TouchableOpacity>
                        )
                    })) : (
                        <Text>There are no Calls</Text>
                    ) }
                </View>
            </ScrollView>
            <PageFooter>
                <View 
                    style={{ 
                        flexDirection: 'column', 
                        height: 100, 
                        alignItems: 'center', 
                        justifyContent: 'flex-start',
                        paddingTop: 7
                    }}
                />
            </PageFooter>
            <DepartmentActionSheet 
                ref={actionSheetRef}
                gestureEnabled
                containerStyle={{
                    height: "50%",
                    width: "100%",
                    backgroundColor: '#ECEDEE',
                }}
            >
                <View style={{ flexDirection: 'column', padding: 20 }}>
                    {deptList?.map((item) => {
                        return (
                            <View style={{ padding: 2 }} key={item?.deptId}>
                                <TouchableOpacity 
                                    style={{
                                        borderRadius: 6,
                                        elevation: 3,
                                        backgroundColor: item?.selected ? 'grey' : '#fff',
                                        shadowOffset: { width: 1, height: 1 },
                                        shadowColor: '#333',
                                        shadowOpacity: 0.3,
                                        shadowRadius: 2,
                                        marginHorizontal: 20,
                                        marginVertical: 6,
                                        padding: 10
                                    }}
                                    onPress={() => {
                                        actionSheetRef.current?.hide();
                                        return updateSelectedDepartment(
                                            selectedDepartment?.deptId, 
                                            item?.deptId
                                        )
                                    }}
                                >
                                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                                        <Text 
                                            style={{ 
                                                color: selectedDepartmentColorPicker(
                                                    item?.type
                                                ), 
                                                fontWeight: 600, 
                                                fontSize: 16
                                            }}
                                        >
                                            {item?.dept}
                                        </Text>
                                        {item?.primary ? <Ionicons name="star" size={16} color="yellow" style={{ 
                                            paddingLeft: 20, 
                                            shadowColor: '#333', 
                                            shadowOffset: 1,
                                            shadowOpacity: 1, 
                                            shadowRadius: 6
                                        }} /> : null}
                                    </View>
                                    <Text>{`${item?.deptAbv} - ${departmentTypeMap[item?.type]}`}</Text>
                                </TouchableOpacity>
                            </View>
                        );
                    })}
                </View>
            </DepartmentActionSheet>
        </React.Fragment>
    )
}