import { Box, HStack, Heading, Text } from '@gluestack-ui/themed'
import { VStack } from '@gluestack-ui/themed'
import React from 'react'
import { strings } from '../utils/i18n'
import VerticalLine from './VerticalLine'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { colorStatusDecider, dropPointLocationRenderer } from '../utils/general'
import { Image, ScrollView } from 'react-native'
import { TouchableOpacity } from 'react-native-gesture-handler'
import { store } from '../appredux/store'
import { setSelectedHistoryPicture, setSelectedHistoryPictures, setShowHistoryPicture } from '../appredux/actions'

export const RenderDeliveryOrder = ({data}) => {
    if (data && data.length > 0) {
        return data.map((item, idx) => {
            return (
                <VStack key={idx}>
                    <Text _dark={{ color: "$textLight200" }} fontSize="$md">
                        {strings('label.dropPointLocations')}
                    </Text>

                    <RenderDropPoint data={item.drop_point} />
                </VStack>
            )
        })
    }
}

export const PointConnector = () => {
    return (
        <HStack py={4}>
            <VStack w='20%' alignItems='center' alignSelf='center'>
                <VerticalLine />
            </VStack>
            <VStack w='80%'></VStack>
        </HStack>
    )
}

export const RenderDropPoint = ({data}) => {
    if (data && data.length > 0) {
        return data.map((item, idx) => {
            return (
                <VStack key={idx}>
                    <HStack py={4}>
                        <VStack w='20%' alignItems='center' alignSelf='center'>
                            <MaterialCommunityIcons
                                name="map-marker"
                                color={colorStatusDecider(item)}
                                size={30}
                            />
                        </VStack>
                        <VStack w='80%'>
                            <Heading 
                                style={{color: colorStatusDecider(item)}}
                                size="sm">
                                {dropPointLocationRenderer(item, 'name')}
                            </Heading>
                            <Text
                                style={{color: colorStatusDecider(item)}}
                                fontSize="$sm">
                                {dropPointLocationRenderer(item, 'address')}
                            </Text>

                            {item.status === 'completed' || item.status === 'cancel' ?
                                <RenderDropPointPictures data={item.attachments} />                    
                                : null
                            }

                            {item.status === 'completed' || item.status === 'cancel' ?
                                <RenderDropPointSignature data={item.signatures} />                    
                                : null
                            }

                            {item.status === 'completed' || item.status === 'cancel' ?
                                <Box mt={5}>
                                    <Text bold>{strings('global.notes')}:</Text>
                                    <Text>{item.driver_notes && item.driver_notes !== '' ? item.driver_notes : '-'}</Text>                
                                </Box>
                                : null
                            }

                        </VStack>
                    </HStack>
                    { idx !== data.length - 1 ? <PointConnector /> : null}
                </VStack>
            )
        })
    }
}

export const RenderDropPointPictures = ({data}) => {
    return (
        <VStack mt={10}>
            <Box>
                <Text bold>{strings('history.dropPointPictures')}</Text>
            </Box>
            <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
                { data && data.length > 0 ? data.map((item, idx) => (
                    <TouchableOpacity key={idx} onPress={() => {
                        store.dispatch(setSelectedHistoryPicture(item))
                        store.dispatch(setShowHistoryPicture(true))
                    }}>
                        <Box pr={5}>
                            <Image 
                                idx={idx}
                                source={{uri: item}}
                                height={100}
                                width={120}
                            />
                        </Box>
                    </TouchableOpacity>
                )) : <Text>-</Text> }
            </ScrollView>
        </VStack>
    )
}

export const RenderDropPointSignature = ({data}) => {
    return (
        <VStack mt={10}>
            <Box>
                <Text bold>{strings('history.signaturePicture')}</Text>
            </Box>
            <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
                { data && data.length > 0 ? data.map((item, idx) => (
                    <TouchableOpacity key={idx} onPress={() => {
                        store.dispatch(setSelectedHistoryPicture(item))
                        store.dispatch(setShowHistoryPicture(true))
                    }}>
                        <Box pr={5}>
                            <Image 
                                idx={idx}
                                source={{uri: item}}
                                height={150}
                                width={120}
                            />
                        </Box>
                    </TouchableOpacity>
                )) : <Text>-</Text> }
            </ScrollView>
        </VStack>
    )
}