import { DesktopOutlined, VideoCameraOutlined, HomeOutlined } from '@ant-design/icons';
import { Layout, Menu, MenuProps } from 'antd';

import { Link, useLocation } from 'react-router-dom';
import { useAuth } from '../contexts/authContext';

const { Sider} = Layout;

const siderStyle: React.CSSProperties = {
  scrollbarWidth: 'thin',
  scrollbarColor: 'unset',
};

interface MySidebarProps {
  collapsed: boolean
  language: string
}

const MySidebar: React.FC<MySidebarProps> = ({collapsed, language}) => {
  const location = useLocation();
  const enableCombinedPilot = process.env.REACT_APP_ENABLE_COMBINED_STREAM_PILOT === '1';

  const {menu, username} = useAuth();

  const getSelectedKey = (pathname: string): string => {
    if (pathname.startsWith('/translations-hls')) {
      return 'translations';
    }

    if (pathname.startsWith('/translations-combined')) {
      return 'translations';
    }

    if (pathname.startsWith('/translations-webrtc')) {
      return 'translations';
    }

    if (pathname.startsWith('/translations/')) {
      return menu === 'account' ? 'translations' : 'language';
    }

    if (pathname.startsWith('/translations')) {
      return 'translations';
    }

    if (pathname.endsWith('/mystream') || pathname.endsWith('/mystream-combined') || pathname.endsWith('/mystream-legacy')) {
      return menu === 'account' ? 'mystream' : 'streamspace';
    }

    return 'home';
  };

  const menuItems: MenuProps['items'] = [
    {
      label: <Link style={{ textDecoration: 'none', fontWeight: 'bold' }} to="/"> Programs </Link>,
      icon: <HomeOutlined/>,
      key: 'home'
    }, 

    {
      label: <Link style={{ textDecoration: 'none', fontWeight: 'bold' }} to={`/translations`}> {enableCombinedPilot ? 'Translations Live' : 'Translations Live 1'} </Link>,
      icon: <DesktopOutlined />,
      key: 'translations'
    },

    {
      label: <Link style={{ textDecoration: 'none', fontWeight: 'bold' }} to={`/${username}/mystream`}> My Stream Space </Link>,
      icon: <VideoCameraOutlined/>,
      key: 'mystream'
    },

  ]

  const guestMenu: MenuProps['items'] = [
    {
      label: <Link style={{ textDecoration: 'none', fontWeight: 'bold' }} to={`/translations`}> {enableCombinedPilot ? 'All Translations' : 'All Translations'} </Link>,
      icon: <DesktopOutlined />,
      key: 'translations'
    },
    {
      label: <Link style={{ textDecoration: 'none', fontWeight: 'bold' }} to={`/translations/${language}`}> {language} </Link>,
      icon: <VideoCameraOutlined/>,
      key: 'language'
    },
    {
      label: <Link style={{ textDecoration: 'none', fontWeight: 'bold' }} to={`/${username}/mystream`}> Stream Space </Link>,
      icon: <VideoCameraOutlined/>,
      key: 'streamspace'
    },
    

  ]

  return (
    <Sider trigger={null} collapsible collapsed={collapsed} width={220} collapsedWidth={0} theme='light' style={siderStyle}>

      <div className="mb-4 fle-bg-teal py-2">
        <div className="profile">
          <div className="profile-pic"></div>
        </div>
        <div className="text-center h6 fle-text-white fw-bold">
          Translators Network International
        </div>
      </div>

      <Menu theme="light" mode="inline" selectedKeys={[getSelectedKey(location.pathname)]}
        style={{  maxHeight: "calc(100vh - 150px)", overflowX: "hidden", overflowY: "auto"}}
        items={menu === 'account' ? menuItems : guestMenu}
      />

    </Sider>
  );
};

export default MySidebar;