import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { refreshMenuAction } from '~/GlobalReducers/menu';
import Styled from 'styled-components/native';
import { Util } from '~/Utils/utils';
import Theme from '~/Themes';
import session from '~/Utils/session';
import { Svg } from '~/Components/UIControls/Svg';
import { NavigationActions } from 'react-navigation';

const Container = Styled.View`
    flex: 1;
    flex-direction: column;
    background-color: white;
    align-items: center;
    justify-content: center;
`;
const Line = Styled.View`
    flex-direction: row;
    height: 30%;
`;
const Item = Styled.TouchableOpacity`
    width: 26%;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    margin: 6px;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: center;
`;
const Title = Styled.Text`
    font-family: ${Theme.Fonts.DemiLight};
    include-font-padding: false;
    font-size: 14;
    line-height: 25;
    letter-spacing:-1.05;
    color: black;
    margin-top:5;
`;

export default Shortcut = ({navigation}) => {
    const globalMenu = useSelector(({ GlobalMenu }) => GlobalMenu.menu);
    const [menus, setMenus] = useState({});

    useEffect(() => {
        loadMenus();
    }, [globalMenu]);

    const loadMenus = async () => {
        await session.loadMenus();
        const list = session.getPathMenus();
        await session.load();

        setMenus(list);
    };

    const Items = [
        { Icon: '/icons/color/qrcode', Menu: menus['/QRScan'] },
        { Icon: '/icons/color/contract_management', Menu: menus['/Facility/Accident'] },
        { Icon: '/icons/color/equipment_history', Menu: menus['/Facility/Complaint'] },
        { Icon: '/icons/color/work_calendar', Menu: menus['/Facility/ApprovalCalendar'] },
        { Icon: '/icons/color/material', Menu: menus['/Material/Material'] },
        { Icon: '/icons/color/notice', Menu: menus['/Etc/Announcement'] },
        { Icon: '/icons/color/setting', Menu: menus['/Setting/BottomShortcut'] },
        { Icon: '/icons/color/alarm', Menu: menus['/Alarm/AlarmLog'] },
        { Icon: '/icons/color/guideline', Menu: menus['/Material/MaterialOrderStatusByStored'] },
    ];

    return (
        <Container>
            <Line>
                <Item onPress={() => { 
                    Util.navigate(navigation, {
                        path: '/QRScan',
                        auth: {
                            Access: true,
                            Update: true,
                            Delete: true,
                            Business: true,
                        },
                        name: 'QR코드',
                        icon: '',
                        id: 0,
                        parentid: 0,
                    });
                }}>
                    <Svg path={Items[0].Icon} width={'30%'} height={'30%'} />
                    <Title>QR코드</Title>
                </Item>
                <Item onPress={() => { Util.navigate(navigation, Items[1].Menu) }}>
                    <Svg path={Items[1].Icon} width={'30%'} height={'30%'} />
                    <Title>사고관리</Title>
                </Item>
                <Item onPress={() => { Util.navigate(navigation, Items[2].Menu) }}>
                    <Svg path={Items[2].Icon} width={'30%'} height={'30%'} />
                    <Title>민원관리</Title>
                </Item>
            </Line>
            <Line>
                <Item onPress={() => { Util.navigate(navigation, Items[3].Menu) }}>
                    <Svg path={Items[3].Icon} width={'30%'} height={'30%'} />
                    <Title>캘린더</Title>
                </Item>
                <Item onPress={() => { Util.navigate(navigation, Items[4].Menu) }}>
                    <Svg path={Items[4].Icon} width={'30%'} height={'30%'} />
                    <Title>자재정보</Title>
                </Item>
                <Item onPress={() => { Util.navigate(navigation, Items[5].Menu) }}>
                    <Svg path={Items[5].Icon} width={'30%'} height={'30%'} />
                    <Title>공지사항관리</Title>
                </Item>
            </Line>
            <Line>
                <Item onPress={() => { Util.navigate(navigation, Items[6].Menu) }}>
                    <Svg path={Items[6].Icon} width={'30%'} height={'30%'} />
                    <Title>단축메뉴</Title>
                </Item>
                <Item onPress={() => { Util.navigate(navigation, Items[7].Menu) }}>
                    <Svg path={Items[7].Icon} width={'30%'} height={'30%'} />
                    <Title>경보이력</Title>
                </Item>
                <Item onPress={() => { Util.navigate(navigation, Items[8].Menu) }}>
                    <Svg path={Items[8].Icon} width={'30%'} height={'30%'} />
                    <Title>미입고현황</Title>
                </Item>
            </Line>
        </Container>
    );
};
