import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
  ScrollView,
} from 'react-native';
import {Screen} from 'react-native-screens';

const SideMenu = () => {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      {/* Header Logo */}
      <View style={styles.header}>
        <Image
          source={require('../assets/images/side_Logo.png')}
          style={styles.logoIcon}
          resizeMode="contain"
        />
      </View>

      {/* Menu Items */}
      <ScrollView style={styles.menuList} showsVerticalScrollIndicator={false}>
        <TouchableOpacity
          style={styles.menuItem}
          onPress={() => navigation.navigate('BuyTickets')}>
          <Image
            source={require('../assets/images/cafe/ticket.png')}
            style={styles.icon}
          />
          <Text style={styles.menuLabel}>Buy Tickets</Text>
          <Text style={styles.arrow}>›</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.menuItem}
          onPress={() => navigation.navigate('OpeningHours')}>
          <Image
            source={require('../assets/images/cafe/opening-hours.png')}
            style={styles.icon}
          />
          <Text style={styles.menuLabel}>Opening Hours</Text>
          <Text style={styles.arrow}>›</Text>
        </TouchableOpacity>

        {/* <TouchableOpacity
          style={styles.menuItem}
          onPress={() =>
            navigation.navigate('ButtomMenu', {
              screen: 'Direction',
            })
          }>
          <Image
            source={require('../assets/images/cafe/direction.png')}
            style={styles.icon}
          />
          <Text style={styles.menuLabel}>Directions & Parking</Text>
          <Text style={styles.arrow}>›</Text>
        </TouchableOpacity> */}

        <TouchableOpacity
          style={styles.menuItem}
          onPress={() => navigation.navigate('WhatOn')}>
          <Image
            source={require('../assets/images/cafe/whats-on.png')}
            style={styles.icon}
          />
          <Text style={styles.menuLabel}>What’s On</Text>
          <Text style={styles.arrow}>›</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.menuItem}
          onPress={() => navigation.navigate('MuseumMap')}>
          <Image
            source={require('../assets/images/cafe/museum.png')}
            style={styles.icon}
          />
          <Text style={styles.menuLabel}>Museum Map</Text>
          <Text style={styles.arrow}>›</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.menuItem}
          onPress={() => navigation.navigate('SouvenirShop')}>
          <Image
            source={require('../assets/images/cafe/souvenir-shop.png')}
            style={styles.icon}
          />
          <Text style={styles.menuLabel}>Souvenir Shop</Text>
          <Text style={styles.arrow}>›</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.menuItem}
          onPress={() => navigation.navigate('Cafe')}>
          <Image
            source={require('../assets/images/cafe/cafe.png')}
            style={styles.icon}
          />
          <Text style={styles.menuLabel}>Cafe Menu</Text>
          <Text style={styles.arrow}>›</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.menuItem}
          onPress={() => navigation.navigate('Settings')}>
          <Image
            source={require('../assets/images/cafe/setting.png')}
            style={styles.icon}
          />
          <Text style={styles.menuLabel}>Settings</Text>
          <Text style={styles.arrow}>›</Text>
        </TouchableOpacity>
      </ScrollView>

      {/* Footer */}
      <View style={styles.footer}>
        <TouchableOpacity onPress={() => navigation.navigate('Signup')}>
          <Image
            source={require('../assets/images/cafe/logooo.png')}
            style={styles.logoSmall}
            resizeMode="contain"
          />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => navigation.navigate('MainScreen')}>
          <Image
            source={require('../assets/images/cafe/Home.png')}
            style={styles.homeIcon}
            resizeMode="contain"
          />
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default SideMenu;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: 60,
    justifyContent: 'space-between',
  },
  header: {
    alignItems: 'center',
    marginBottom: 18,
    paddingHorizontal: 10,
  },
  logoIcon: {
    width: 180,
    height: 60,
  },
  menuList: {
    flexGrow: 1,
    paddingHorizontal: 5,
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 14,
    borderBottomColor: '#eee',
    borderBottomWidth: 1,
    paddingHorizontal: 20,
  },
  icon: {
    width: 22,
    height: 22,
    marginRight: 15,
  },
  menuLabel: {
    flex: 1,
    fontSize: 16,
    color: '#333',
    fontWeight: '600',
  },
  arrow: {
    fontSize: 18,
    color: '#999',
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 16,
    borderTopColor: '#eee',
    borderTopWidth: 1,
    marginBottom: 20,
    paddingHorizontal: 20,
  },
  logoSmall: {
    width: 70,
    height: 50,
  },
  homeIcon: {
    width: 30,
    height: 30,
  },
});