/**
 *
 * LeftMenu
 *
 */

import React, { useState } from 'react';
import { useIntl } from 'react-intl';
import { NavLink } from 'react-router-dom';

import {
  // SubNav,
  // SubNavHeader,
  SubNavSection,
  SubNavSections,
  SubNavLink,
} from '@strapi/design-system/v2/SubNav';
import styled from 'styled-components';

import { matchByTitle } from './utils';
import getTrad from '../../../utils/getTrad';
import useContentTypes from '../useContentTypes';

const LeftMenu = () => {
  const [search] = useState('');
  const { formatMessage } = useIntl();
  // const modelLinksSelector = useMemo(makeSelectModelLinks, []);
  const { collectionTypeLinks, singleTypeLinks } = useContentTypes();

  const toIntl = (links) =>
    links.map((link) => {
      return {
        ...link,
        title: formatMessage({ id: link.title, defaultMessage: link.title }),
      };
    });

  const intlCollectionTypeLinks = toIntl(collectionTypeLinks);
  const intlSingleTypeLinks = toIntl(singleTypeLinks);

  const menu = [
    {
      id: 'collectionTypes',
      title: {
        id: getTrad('components.LeftMenu.collection-types'),
        defaultMessage: 'Collection Types',
      },
      searchable: true,
      links: matchByTitle(intlCollectionTypeLinks, search),
    },
    {
      id: 'singleTypes',
      title: {
        id: getTrad('components.LeftMenu.single-types'),
        defaultMessage: 'Single Types',
      },
      searchable: true,
      links: matchByTitle(intlSingleTypeLinks, search),
    },
  ];

  return (
    <div>
      {/* <SubNavHeader
        label={label}
        searchable
        value={search}
        onChange={handleChangeSearch}
        onClear={handleClear}
        searchLabel={formatMessage({
          id: 'content-manager.components.LeftMenu.Search.label',
          defaultMessage: 'Search for a content type',
        })}
      /> */}
      <SubNavSectionsStyled>
        {menu.map((section) => {
          const label = formatMessage(
            { id: section.title.id, defaultMessage: section.title.defaultMessage },
            section.title.values
          );

          return (
            <SubNavSection
              key={section.id}
              label={label}
              badgeLabel={section.links.length.toString()}
            >
              {section.links.map((link) => {
                const search = link.search ? `?${link.search}` : '';

                return (
                  <SubNavLink as={NavLink} key={link.uid} to={`${link.to}${search}`}>
                    {link.title}
                  </SubNavLink>
                );
              })}
            </SubNavSection>
          );
        })}
      </SubNavSectionsStyled>
    </div>
  );
};

const SubNavSectionsStyled = styled(SubNavSections)`
  margin-left: -10px;
  margin-right: -10px;
  ol {
    margin-right: 5px;
    overflow-y: hidden;
    max-height: 280px;
    &:hover {
      overflow-y: auto;
    }
    a {
      background-color: transparent;
    }
    /* width */
    &::-webkit-scrollbar {
      width: 3px;
    }

    /* Track */
    &::-webkit-scrollbar-track {
      background: #dcdcdc;
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
      background: #c4c4c4;
    }

    /* Handle on hover */
    &::-webkit-scrollbar-thumb:hover {
      background: #555;
    }
  }
`;

export default LeftMenu;
