import React, { Component } from 'react'
import Header from './components/Header';
// import NavRight from './components/NavRight';
import NavLeft from './components/NavLeft';
import Pages from './components/Pages';
import ProfileMenuBox from './components/ProfileMenuBox';
import BottomBox from './components/BottomBox';
import Login from './pages/Login';
import Auth from './middlewares/Auth';
import Cookies from 'universal-cookie';
const cookies = new Cookies();

export default class App extends Component {
  state = {
    profile: {
      id: 1,
      first_name: 'Batuhan',
      second_name: 'Coşkun',
      username: 'batuhancoskun',
      menus: {
        selected: '',
        list: [{
          id: 0,
          title: 'Özet',
          path: ''
        },{
          id: 1,
          title: 'Gönderiler',
          path: 'posts'
        },{
          id: 2,
          title: 'Hakkında',
          path: 'about'
        }]
      }
    },
    menus: {
      selected: '',
      list: [{
        id: 0,
        title: 'Anasayfa',
        path: ''
      }]
    },
    serverOptions: {
      endBack: {
        url: "http://192.168.1.27:3001"
      },
      backEnd: {
        title: "Node",
        url: "http://192.168.1.27:3001"
      }
    },
    auth: false,
    runAuth: false
  };

  functions = {
    profile: {
      menus: {
        changeMenu: (menuId) => {
          this.setState({
            profile: {
              ...this.state.profile,
              menus: {
                ...this.state.profile.menus,
                selected: menuId
              }
            }
          })
        },
        menuControl: (menuId) => {
          const control = this.state.profile.menus.selected === menuId;
          if(!control){
            this.functions.profile.menus.changeMenu(menuId);
          };
        }
      }
    },
    menus: {
      changeMenu: (menuId) => {
        this.setState({
          menus: {
            ...this.state.menus,
            selected: menuId
          }
        })
      },
      menuControl: (menuId) => {
        const control = this.state.menus.selected === menuId;
        if(!control){
          this.functions.menus.changeMenu(menuId);
        };
      }
    }
  };

  render() {
    Auth(this.state.serverOptions.endBack.url);

    if(cookies.get("auth") === "Success"){
      return (
        <div className='flex flex-col h-screen overflow-hidden'>
          <Header state={this.state}/>
          <div className='flex flex-col h-screen overflow-hidden p-4'>
            <div className='flex flex-col h-screen overflow-hidden gap-4'>
              <div className='grid grid-cols-5 h-full overflow-hidden gap-4'>
                <div className='flex flex-col gap-4'>
                  <div className='flex bg-white h-full rounded-2xl overflow-hidden'>
                    <NavLeft state={this.state} functions={this.functions}/>
                  </div>
                </div>
                <div className='flex col-span-4 h-full overflow-y-scroll bg-white rounded-2xl p-4'>
                  <Pages state={this.state} functions={this.functions}/>
                </div>
              </div>
              <div className='grid grid-cols-5 h-16 gap-4'>
                <div className='flex bg-white rounded-2xl overflow-hidden'>
                  <ProfileMenuBox state={this.state} functions={this.functions}/>
                </div>
                <div className='flex col-span-4 bg-white rounded-2xl'>
                  <BottomBox/>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    }else{
      return(
        <div className='flex flex-col h-screen overflow-hidden'>
          <Header state={this.state}/>
          <div className='flex flex-col h-screen overflow-hidden p-4'>
            <div className='flex flex-col h-screen overflow-hidden gap-4'>
              <div className='grid grid-cols-5 h-full overflow-hidden gap-4'>
                <div className='flex col-span-5 h-full w-full items-center justify-center overflow-y-scroll bg-white rounded-2xl p-4'>
                  <Login state={this.state} functions={this.functions}/>
                </div>
              </div>
            </div>
          </div>
        </div>
      )
    }

  };
};