import React from 'react';
import { View,Text, TouchableOpacity, Touchable, Pressable } from 'react-native';
import { Container, Icon } from 'components';
import { useDispatch, useSelector } from 'react-redux';
import { signOut } from 'actions';
import { Colors, FONTS } from 'global-styles'
import { RFValue } from 'react-native-responsive-fontsize';
import menu  from './menu';
import AsyncStorage from '@react-native-async-storage/async-storage';

const MenuButton = ({title, name, type}) => (
  <View style={{ alignItems: 'center'}}>
  <View style={{ backgroundColor: Colors.TERTIARY, borderRadius: 10, padding: 5, alignItems: 'center', width: RFValue(36), height: RFValue(36), marginBottom: RFValue(5), justifyContent: 'center'}}>
    <Icon
      name={name}
      type={type}
      style={{color: Colors.PRIMARY, fontSize: RFValue(16)}}
    />
  </View>
    <Text style={{color: 'black', fontFamily: FONTS.poppins[400], fontSize: RFValue(10)}}>{title}</Text>
  </View>
);

const Home = ({ navigation }) => {
  const dispatch = useDispatch();
  const profile = useSelector(state => state.auth.data);
  const cleanReduxState = () => {
    AsyncStorage.clear();
    dispatch(signOut());
  };

  return (
    <Container backgroundColor={Colors.WHITE} safeAreaStyleProps={{margin: 10}}>
      <Text
        style={{
          fontFamily: FONTS.poppins[700],
          color: Colors.PRIMARY,
          fontSize: RFValue(18),
        }}>
        {profile ? profile.outlet_name.toUpperCase() : ''}
      </Text>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-around',
          marginHorizontal: RFValue(10),
        }}>
        {menu.map(val => (
          <>
            <MenuButton title={val.label} name={val.name} type={val.type} />
          </>
        ))}
      </View>
      <TouchableOpacity onPress={() => navigation.navigate('Selling')}>
        <Text style={{color: 'black'}}>MULAI JUALAN</Text>
      </TouchableOpacity>
      <View style={{flexDirection: 'row'}}>
        <Text style={{color: 'black'}}>Total Penjualan</Text>
        <Text style={{color: 'black'}}>Jumlah Nominal Penjualan</Text>
      </View>
      <TouchableOpacity onPress={() => cleanReduxState()}>
        <Text style={{color: 'black'}}>Logout</Text>
      </TouchableOpacity>
    </Container>
  );
}

export default Home;