import NavbarSvg from "@/assets/icons/svg/navbar.svg";
import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import React from 'react';
import { Platform, TouchableOpacity, View } from 'react-native';
import { Circle, Ellipse, G, Mask, Path, Rect, Svg } from 'react-native-svg';

const AskNavbar = () => {
    return (
        <View className="absolute bottom-0 left-0 right-0 bg-white" style={{
            shadowColor: '#000',
            shadowOffset: { width: 0, height: -4 }, // Negative height for bottom shadow
            shadowOpacity: 0.1,
            shadowRadius: 8,
            elevation: 10, // For Android
        }}>
            <NavbarSvg className="w-full h-full" />
            <View className="absolute bottom-0 top-0 left-0 right-0 flex flex-row justify-between items-center px-[2rem]">
                <TouchableOpacity onPress={() => router.push('/memo-list')} >
                    <Ionicons name="chatbubbles-outline" size={24} color="#4C320C" />
                </TouchableOpacity>

                <TouchableOpacity
                    onPress={() => {
                        router.push({
                            pathname: '/ask',
                            params: { newSession: "true" }
                        });
                    }}
                    className={`${Platform.OS === 'web' ? '-mt-[4rem]' : '-mt-[5rem] ml-[0.8rem]'}`}
                >
                    <View style={{
                        shadowColor: '#FFB645',
                        shadowOffset: { width: 0, height: 4 },
                        shadowOpacity: 0.3,
                        shadowRadius: 8,
                        elevation: 8,
                        borderRadius: 50,
                        backgroundColor: 'transparent',
                        zIndex: 10,
                        width: 85,
                        height: 85
                    }}>
                        <Svg width="100%" height="100%" viewBox="0 0 85 85" fill="none">
                            <Mask id="mask0_1464_1669" maskUnits="userSpaceOnUse" x="0" y="0" width="85" height="85">
                                <Circle cx="42.5" cy="42.5" r="42.5" fill="#FFC959" />
                            </Mask>
                            <G mask="url(#mask0_1464_1669)">
                                <Circle cx="42.5" cy="42.5" r="42.5" fill="#FFD38D" />
                                <Path d="M20.2018 14.6411C21.8694 12.5551 26.4765 16.939 28.5716 19.3917L20.8604 20.0277C19.3178 19.3509 18.5342 16.7271 20.2018 14.6411Z" fill="#FFDBA3" />
                                <Path d="M21.3021 15.4913C22.503 13.6451 25.3001 17.1089 26.5485 19.0716L22.7323 19.2755C21.7552 18.7834 20.1012 17.3376 21.3021 15.4913Z" fill="#AC7E35" />
                                <Path d="M65.1253 14.6411C63.4577 12.5551 58.8506 16.939 56.7556 19.3917L64.4667 20.0277C66.0093 19.3509 66.7929 16.7271 65.1253 14.6411Z" fill="#FFDBA3" />
                                <Path d="M64.0255 15.4913C62.8246 13.6451 60.0276 17.1089 58.7792 19.0716L62.5953 19.2755C63.5724 18.7834 65.2264 17.3376 64.0255 15.4913Z" fill="#AC7E35" />
                                <Path d="M-15.3352 49.1734C10.3693 4.65192 74.6306 4.65187 100.335 49.1734L117.868 79.5409C143.572 124.062 111.442 179.714 60.0327 179.714H24.9673C-26.4417 179.714 -58.5724 124.062 -32.8679 79.5409L-15.3352 49.1734Z" fill="#FFD18A" />
                                <Rect x="38.5571" y="46.2812" width="2.62922" height="3.68091" rx="1.31461" transform="rotate(-180 38.5571 46.2812)" fill="#4C320C" />
                                <Rect x="48.0205" y="46.2812" width="2.62922" height="3.68091" rx="1.31461" transform="rotate(-180 48.0205 46.2812)" fill="#4C320C" />
                                <Path d="M4.8084 73.2062C22.9876 46.7781 62.0132 46.7782 80.1924 73.2062L100.897 103.306C121.776 133.659 100.046 174.982 63.2051 174.982H21.7957C-15.0453 174.982 -36.7756 133.659 -15.8963 103.306L4.8084 73.2062Z" fill="#FFF8DE" />
                                <G>
                                    <Ellipse cx="79.047" cy="68.6298" rx="43.1193" ry="30.7619" fill="#FFF8DE" />
                                </G>
                                <G>
                                    <Ellipse cx="5.69032" cy="68.6298" rx="42.8563" ry="30.7619" fill="#FFF8DE" />
                                </G>
                                <Ellipse cx="42.2365" cy="53.3803" rx="3.15507" ry="2.3663" transform="rotate(180 42.2365 53.3803)" fill="#FFB8B9" />
                                <Path d="M41.7813 56.0095C41.9837 55.6589 42.4897 55.6589 42.6921 56.0095L43.1475 56.7982C43.3499 57.1488 43.0969 57.587 42.6921 57.587H41.7813C41.3765 57.587 41.1235 57.1488 41.3259 56.7982L41.7813 56.0095Z" fill="#4C320C" />
                            </G>
                        </Svg>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => router.push('/owner')}>
                    <View>
                        <Ionicons name="person-outline" size={24} color="#4C320C" />
                        {/* <View className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full" /> */}
                    </View>
                </TouchableOpacity>
            </View>
        </View>
    );
};

export default AskNavbar;