import React from "react";
import { Image, Text, TouchableOpacity, View } from "react-native";
import type TimerProps from "./properties/TimerProps";
import * as Colors from './utils/Colors';
import * as Style from './utils/Style';

const Timer = (_params: TimerProps) => {
    return (
        <View
            style={{
                flexDirection: 'row',
                position: 'absolute',
                bottom: 5,
                marginBottom: 8.0,
                left: 15,
                right: 15,
                justifyContent: 'space-between',
            }}>
            <View
                style={{
                    flexDirection: 'column',
                    paddingHorizontal: 12,
                    paddingVertical: 8,
                    backgroundColor: Colors.grey,
                    borderRadius: 5,
                    alignItems: 'center',
                    justifyContent: 'center',
                }}>
                <TouchableOpacity style={{ paddingHorizontal: 20, paddingVertical: 5 }}>
                    <Image
                        style={{
                            width: 15,
                            height: 15,
                            alignSelf: 'center',
                            tintColor: Colors.Grey,
                        }}
                        source={require('./images/up_arrow.png')}
                        resizeMode="contain"
                    />
                </TouchableOpacity>

                <Text
                    style={[
                        Style.styleSheet.boldText,
                        { paddingHorizontal: 20, paddingVertical: 5 },
                    ]}>
                    08h
                </Text>
                <TouchableOpacity style={{ paddingHorizontal: 20, paddingVertical: 5 }}>
                    <Image
                        style={{
                            width: 15,
                            height: 15,
                            alignSelf: 'center',
                            tintColor: Colors.Grey,
                        }}
                        source={require('./images/down_arrow.png')}
                        resizeMode="contain"
                    />
                </TouchableOpacity>
            </View>

            <Text style={[Style.styleSheet.boldText, { alignSelf: 'center' }]}>
                :
            </Text>

            <View
                style={{
                    flexDirection: 'column',
                    paddingHorizontal: 12,
                    paddingVertical: 8,
                    backgroundColor: Colors.grey,
                    borderRadius: 5,
                    alignItems: 'center',
                    justifyContent: 'center',
                }}>
                <TouchableOpacity style={{ paddingHorizontal: 20, paddingVertical: 5 }}>
                    <Image
                        style={{
                            width: 15,
                            height: 15,
                            alignSelf: 'center',
                            tintColor: Colors.Grey,
                        }}
                        source={require('./images/up_arrow.png')}
                        resizeMode="contain"
                    />
                </TouchableOpacity>

                <Text
                    style={[
                        Style.styleSheet.boldText,
                        { paddingHorizontal: 20, paddingVertical: 5 },
                    ]}>
                    10m
                </Text>
                <TouchableOpacity style={{ paddingHorizontal: 20, paddingVertical: 5 }}>
                    <Image
                        style={{
                            width: 15,
                            height: 15,
                            alignSelf: 'center',
                            tintColor: Colors.Grey,
                        }}
                        source={require('./images/down_arrow.png')}
                        resizeMode="contain"
                    />
                </TouchableOpacity>
            </View>

            <View
                style={{
                    flexDirection: 'column',
                    paddingHorizontal: 6,
                    paddingVertical: 8,
                    backgroundColor: Colors.grey,
                    borderRadius: 5,
                    alignItems: 'center',
                    justifyContent: 'center',
                }}>
                <Text
                    style={[
                        Style.styleSheet.headerTextStyle,
                        {
                            paddingHorizontal: 10,
                            paddingVertical: 5,
                            alignSelf: 'center',
                            flex: 1,
                            color: Colors.LightBlue,
                        },
                    ]}>
                    AM
                </Text>
                <View style={{ flex: 1 }}>
                    <View
                        style={{
                            backgroundColor: Colors.Grey,
                            width: 15,
                            height: 1,
                        }}
                    />
                </View>
                <Text
                    style={[
                        Style.styleSheet.headerTextStyle,
                        {
                            paddingHorizontal: 10,
                            paddingVertical: 5,
                            alignSelf: 'center',
                            flex: 1,
                            color: Colors.Grey,
                        },
                    ]}>
                    PM
                </Text>
            </View>
        </View>
    );
}

export default Timer;