import React from 'react';
import { NavLink } from 'react-router-dom';
import {
  NavigationContainer,
  SideMenuDropdownBody,
  SideMenuDropdownHeader,
} from './index.styled';
import { ChevronIconActive } from './assets/svg/chevronIcon';
import cx from 'classnames';

const NavItem = ({ activeDropdown, handleToggle, bodyRef, item, idx }) => {
  return (
    <div
      key={idx}
      className={cx('option-type', { 'has-border': item.hasBorder })}
    >
      <NavigationContainer>
        {item?.optionType && <p className="menu_title"> {item?.optionType}</p>}

        {item?.routes.map((route, idx) => (
          <div key={idx}>
            {!route?.hasDropdown && (
              <NavLink to={route?.path}>
                {({ isActive }) => {
                  return isActive ? (
                    <span
                      id="navlink__title"
                      className={isActive ? 'active-link' : ''}
                    >
                      {route?.iconActive} {route?.text}
                      {route?.hasNotification && (
                        <span className="dropdown_notification">
                          {route?.notifications}
                        </span>
                      )}
                    </span>
                  ) : (
                    <span id="navlink__title" className="">
                      {route?.icon} {route?.text}
                      {route?.hasNotification && (
                        <span className="dropdown_notification">
                          {route?.notifications}
                        </span>
                      )}
                    </span>
                  );
                }}
              </NavLink>
            )}

            {route?.hasDropdown && (
              <>
                <SideMenuDropdownHeader
                  className={`${
                    activeDropdown?.index === idx &&
                    activeDropdown?.type === item?.optionType
                      ? 'active-dropdown'
                      : ''
                  }`}
                  onClick={() =>
                    handleToggle({ type: item.optionType, index: idx })
                  }
                >
                  <span className="dropdown_header_txt">
                    {activeDropdown?.index === idx &&
                    activeDropdown?.type === item?.optionType ? (
                      <> {route?.iconActive}</>
                    ) : (
                      <>{route?.icon} </>
                    )}

                    {route?.text}
                  </span>
                  {route?.hasNotification && (
                    <span className="dropdown_notification">
                      {route?.notifications}
                    </span>
                  )}
                  <span className="dropdown_header_chevron">
                    <ChevronIconActive
                      style={{
                        transform:
                          activeDropdown?.index === idx &&
                          activeDropdown?.type === item?.optionType
                            ? 'rotate(180deg)'
                            : ' ',
                      }}
                      fill={
                        activeDropdown?.index === idx &&
                        activeDropdown?.type === item?.optionType
                          ? '#fff'
                          : '#636666'
                      }
                    />
                  </span>
                </SideMenuDropdownHeader>

                <SideMenuDropdownBody
                  ref={bodyRef}
                  className={`rc-collapse ${
                    activeDropdown?.index === idx &&
                    activeDropdown?.type === item?.optionType
                      ? 'show'
                      : ''
                  }`}
                  style={
                    activeDropdown?.index === idx &&
                    activeDropdown?.type === item?.optionType
                      ? { height: 'auto' }
                      : { height: '0px' }
                  }
                >
                  {route?.dropdownItems?.map((list, idx) => (
                    <div className="dropdown_row" key={idx}>
                      <NavLink
                        to={list?.path}
                        id="dropdown__links"
                        className={({ isActive }) => (isActive ? 'active' : '')}
                      >
                        {list?.text}
                      </NavLink>

                      {list?.hasNotification && (
                        <span className="dropdown_notification">
                          {list?.notifications}
                        </span>
                      )}
                    </div>
                  ))}
                </SideMenuDropdownBody>
              </>
            )}
          </div>
        ))}
      </NavigationContainer>
    </div>
  );
};

export default NavItem;
