import React, { useState } from 'react';
import { Layout, Drawer, Button } from 'antd';
import { Link } from 'react-router-dom';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons';
import HomeIcon from '../../assets/thob-data/HomeIcon.svg';
import AddCustomerIcon from '../../assets/thob-data/AddCustomerIcon.svg';
import OrdersIcon from '../../assets/thob-data/OrdersIcon.svg';
import CategoriesIcon from '../../assets/thob-data/CategoriesIcon.svg';
import ProfileIcon from '../../assets/thob-data/ProfileIcon.svg';
import LogoutIcon from '../../assets/thob-data/LogoutIcon.svg';


const { Sider } = Layout;

const EmployeeSidebar = () => {
  const [visible, setVisible] = useState(false);

  const showDrawer = () => {
    setVisible(true);
  };

  const closeDrawer = () => {
    setVisible(false);
  };

  return (
    <>
      <Button
        className="menu-button"
        type="primary"
        onClick={showDrawer}
        icon={visible ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
      />
      <Drawer
        title="Menu"
        placement="left"
        onClose={closeDrawer}
        visible={visible}
        bodyStyle={{ padding: 0 }}
        width={200}
      >
        <div className="drawer-menu">
          <Link to="/employee-dashboard" className="drawer-link">
            <img src={HomeIcon} alt="Home" className="drawer-icon" />
          </Link>
          <Link to="/employee/categories" className="drawer-link">
            <img src={CategoriesIcon} alt="Categories" className="drawer-icon" />
          </Link>
          <Link to="/employee/manage-customers" className="drawer-link">
            <img src={AddCustomerIcon} alt="Add Customer" className="drawer-icon" />
          </Link>
          <Link to="/employee/orders" className="drawer-link">
            <img src={OrdersIcon} alt="Orders" className="drawer-icon" />
          </Link>
          <Link to="/employee/profile" className="drawer-link">
            <img src={ProfileIcon} alt="Profile" className="drawer-icon" />
          </Link>
          <Link to="/employee/logout" className="drawer-link">
            <img src={LogoutIcon} alt="Logout" className="drawer-icon" />
          </Link>
        </div>
      </Drawer>
      <Sider
        className="desktop-sidebar"
        breakpoint="lg"
        collapsedWidth="0"
        width={200}
        style={{ height: '100vh' }}
      >
        <div className="flex items-center justify-center h-16 w-16 m-5 bg-white" style={{ width: '40px', height: '40px', marginTop: '16px', marginLeft: '20px' }}>
          <div className="text-black">t.</div>
        </div>
        <div className="flex flex-col items-center">
          <Link to="/employee-dashboard" className="my-6">
            <img src={HomeIcon} alt="Home" className="hover:opacity-75 sidebar-icon" />
          </Link>
          <Link to="/employee/categories" className="my-6">
            <img src={CategoriesIcon} alt="Categories" className="hover:opacity-75 sidebar-icon" />
          </Link>
          <Link to="/employee/manage-customers" className="my-6">
            <img src={AddCustomerIcon} alt="Add Customer" className="hover:opacity-75 sidebar-icon" />
          </Link>
          <Link to="/employee/orders" className="my-6">
            <img src={OrdersIcon} alt="Orders" className="hover:opacity-75 sidebar-icon" />
          </Link>
          <Link to="/employee/profile" className="my-6">
            <img src={ProfileIcon} alt="Profile" className="hover:opacity-75 sidebar-icon" />
          </Link>
          <Link to="/employee/logout" className="my-6">
            <img src={LogoutIcon} alt="Logout" className="hover:opacity-75 sidebar-icon" />
          </Link>
        </div>
      </Sider>
    </>
  );
};

export default EmployeeSidebar;