import React, { useEffect, useState } from 'react';
import { Layout, Row, Col, Menu, Dropdown, Button, Avatar, Tooltip } from 'antd';
import { MenuUnfoldOutlined, MenuFoldOutlined, FullscreenOutlined, FullscreenExitOutlined, HighlightOutlined, BulbOutlined } from '@ant-design/icons';
import './header-nav-component.css';
import { useAuthState, logout } from '../auth-context';
import sunIcn from '../icons/sun.png';
import moonIcn from "../icons/moon.png";

const { Header } = Layout;

interface IProps {
  collapsed: boolean;
  toggle: () => void;
  themeValue: string
  setThemeValue: React.Dispatch<React.SetStateAction<string>>
}

export const CommonHeader = (props: IProps) => {
  const { themeValue, setThemeValue } = props;
  const { authContext, dispatch } = useAuthState();
  let profilePicPath = authContext?.user?.profilePicPath || '';
  const [isFullscreen, setIsFullscreen] = useState(false);

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
      setIsFullscreen(true);
    } else if (document.exitFullscreen) {
      document.exitFullscreen();
      setIsFullscreen(false);
    }
  };

  useEffect(() => {
    const handleFullscreenChange = () => {
      setIsFullscreen(!!document.fullscreenElement);
    };

    document.addEventListener('fullscreenchange', handleFullscreenChange);

    return () => {
      document.removeEventListener('fullscreenchange', handleFullscreenChange);
    };
  }, []);

  const logoutHandler = () => {
    logout(dispatch);
  };

  const menu = (
    <Menu>
      <Menu.Item>
        Name: {authContext?.user?.userName}
      </Menu.Item>
      <Menu.Item key="logout">
        <Button onClick={logoutHandler}>
          Logout
        </Button>
      </Menu.Item>
    </Menu>
  );

  return (
    <Header style={{ padding: '0 20px' }}>
      <Row align="middle" justify="space-between">
        <Col>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <h1 style={{ color: '#fff', margin: 0, fontSize: "20px" }}>SCHOOL MANAGEMENT</h1>
            <span className="ant-pro-global-header-trigger" style={{ marginLeft: 16 }}>
              {React.createElement(props.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                onClick: props.toggle,
              })}
            </span>
          </div>
        </Col>
        <Col>
          <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
            <Button onClick={toggleFullscreen} >
              {isFullscreen ? <FullscreenExitOutlined style={{ fontSize: '16px' }} /> : <FullscreenOutlined style={{ fontSize: '16px' }} />}
            </Button>
            <Tooltip placement="bottom" title={'Switch mode'}>
              {themeValue === 'dark' ? (
                <Button onClick={() => setThemeValue('light')}>
                  <img src={sunIcn} style={{ color: '#fff', width: "18px", height: '18px' }} />
                </Button>
              ) : (
                <Button onClick={() => setThemeValue('dark')}>
                  <img src={moonIcn} style={{ color: '#fff', width: "18px", height: '18px' }} />
                </Button>
              )}
            </Tooltip>
            <Dropdown overlay={menu}>
              <span className="ant-dropdown-link">
                <Avatar src={profilePicPath} size="default" shape="circle">
                  {authContext?.user?.userName?.[0]}
                </Avatar>
              </span>
            </Dropdown>
          </div>
        </Col>
      </Row>
    </Header>
  );
};