import React, { useState } from 'react';

import { Colors } from '../../../theme';
import { PageWrapper, MenuButton, WarningModal } from '../../../components';
import { MenuButtonType } from '../../../types/components';

import FlagsIcon from '../../../../assets/icons/travels-section/flags.svg';
import RegionsIcon from '../../../../assets/icons/travels-section/regions.svg';
import MapLocationIcon from '../../../../assets/icons/travels-section/map-location.svg';
import SeriesIcon from '../../../../assets/icons/travels-section/series.svg';
import EarthIcon from '../../../../assets/icons/travels-section/earth.svg';
import TripIcon from '../../../../assets/icons/travels-section/trip.svg';
import ImagesIcon from '../../../../assets/icons/travels-section/images.svg';

import { NAVIGATION_PAGES } from 'src/types';
import { storage, StoreType } from '../../../storage';

const TravelsScreen = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const token = storage.get('token', StoreType.STRING);

  const buttons: MenuButtonType[] = [
    {
      label: 'Countries',
      icon: <FlagsIcon fill={Colors.DARK_BLUE} width={20} height={20} />
    },
    {
      label: 'Regions',
      icon: <RegionsIcon fill={Colors.DARK_BLUE} width={20} height={20} />
    },
    {
      label: 'DARE',
      icon: <MapLocationIcon fill={Colors.DARK_BLUE} width={20} height={20} />
    },
    {
      label: 'Series',
      icon: <SeriesIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
      buttonFn: (navigation) => {
        if (!token) {
          setIsModalVisible(true);
        } else {
          navigation.navigate(NAVIGATION_PAGES.SERIES);
        }
      }
    },
    {
      label: 'Earth',
      icon: <EarthIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
      buttonFn: (navigation) => {
        if (!token) {
          setIsModalVisible(true);
        } else {
          navigation.navigate(NAVIGATION_PAGES.EARTH);
        }
      }
    },
    {
      label: 'Trips',
      icon: <TripIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
      buttonFn: (navigation) => {
        if (!token) {
          setIsModalVisible(true);
        } else {
          navigation.navigate(NAVIGATION_PAGES.TRIPS);
        }
      }
    },
    {
      label: 'Photos',
      icon: <ImagesIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
      buttonFn: (navigation) => {
        if (!token) {
          setIsModalVisible(true);
        } else {
          navigation.navigate(NAVIGATION_PAGES.PHOTOS);
        }
      }
    }
  ];

  return (
    <PageWrapper>
      {buttons.map((button, index) => (
        <MenuButton
          label={button.label}
          icon={button.icon}
          buttonFn={button.buttonFn}
          key={'travels-button-' + index}
        />
      ))}
      <WarningModal
        type={'unauthorized'}
        isVisible={isModalVisible}
        onClose={() => setIsModalVisible(false)}
      />
    </PageWrapper>
  );
};

export default TravelsScreen;