import { ContentSidebar, Section, Content, Layout } from '@vizality/components/dashboard';
import { Icon, CodeBlock, ComponentPreview, FilterInput } from '@vizality/components';
import { getRandomItem } from '@vizality/util/array';
import { joinClassNames } from '@vizality/util/dom';
import { getModule } from '@vizality/webpack';
import React, { memo, useState } from 'react';
import { useFilter } from '@vizality/hooks';

/**
 *
 * @component
 * @private
 * @returns
 */
const Search = memo(({ query, handleQueryChange }) => (
  <div className='vz-component-preview-search'>
    <FilterInput
      className='vz-component-preview-search-input-wrapper'
      placeholder='Filter'
      value={query}
      onChange={handleQueryChange}
      debounce={0}
    />
  </div>
));

/**
 *
 * @component
 * @private
 * @returns
 */
const DocsIcon = memo(({ icon, selectedIcon, handleSelectedIcon }) => (
  <Icon
    name={icon}
    tooltip={icon}
    vz-active={Boolean(selectedIcon === icon) && ''}
    className='vz-docs-components-icons-icon-wrapper'
    iconClassName='vz-docs-components-icons-icon'
    onClick={() => handleSelectedIcon(icon)}
  />
));

/**
 *
 * @component
 * @private
 * @returns
 */
const Preview = memo(({ icons, query, selectedIcon, handleSelectedIcon }) => {
  const { marginBottom20 } = getModule('marginBottom20');
  return (
    <>
      {!icons.length
        ? <div className='vz-component-preview-no-results'>
          <div className='vz-component-preview-no-results-image' />
          <div className={`vz-component-preview-no-results-text ${marginBottom20}`}>
            {`There were no icons found matching "${query}"`}
          </div>
        </div>
        : <>
          {icons.map(icon =>
            <DocsIcon
              icon={icon}
              selectedIcon={selectedIcon}
              handleSelectedIcon={handleSelectedIcon}
            />
          )}
        </>
      }
    </>
  );
});

/**
 *
 * @component
 * @private
 * @returns
 */
const CodeBlocks = memo(({ selectedIcon }) => (
  <CodeBlock language='js' header='JSX' content={
    `import { Icon } from '@vizality/components';\n\n` +
    `<Icon name='${selectedIcon}' />`}
  />
));

/**
 *
 * @component
 * @private
 * @returns
 */
const Aside = memo(({ selectedIcon }) => {
  const { marginBottom20 } = getModule('marginBottom20');
  const { weightMedium } = getModule('weightMedium');
  const { size20 } = getModule('size24');
  return (
    <>
      {selectedIcon && <>
        <div className={joinClassNames('vz-docs-components-icons-aside-icon-name', size20, marginBottom20, weightMedium)}>
          {selectedIcon}
        </div>
        <Icon
          name={selectedIcon}
          size='100%'
          className='vz-docs-components-icons-aside-icon-wrapper'
        />
      </>}
    </>
  );
});

/**
 *
 * @component
 * @returns
 */
export default memo(() => {
  const [ selectedIcon, setSelectedIcon ] = useState(getRandomItem(Icon.Names));
  const [ query, setQuery, filteredResults ] = useFilter({ data: Icon.Names });

  /**
   *
   * @param {*} query
   * @returns
   */
  const handleQueryChange = query => {
    return setQuery(query);
  };

  /**
   *
   * @param {*} icon
   * @returns
   */
  const handleSelectedIcon = icon => {
    return setSelectedIcon(icon);
  };

  return (
    <Layout>
      <Content header='Components' description='I like components and stuff'>
        <Section
          header='Icons'
          description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare tellus nec dapibus finibus. Nulla massa velit, mattis non eros a, interdum tristique massa. Curabitur mauris sem, porttitor quis ligula vitae, suscipit hendrerit quam. Nunc sit amet enim id elit vehicula tempus sed sed tellus. Aliquam felis turpis, malesuada ut tortor id, iaculis facilisis felis.'
        >
          <ComponentPreview
            preview={<Preview icons={filteredResults} selectedIcon={selectedIcon} query={query} handleSelectedIcon={handleSelectedIcon} />}
            code={<CodeBlocks selectedIcon={selectedIcon} />}
            aside={<Aside selectedIcon={selectedIcon} />}
            tabBarChildren={<Search query={query} handleQueryChange={handleQueryChange} />}
          />
        </Section>
      </Content>
    </Layout>
  );
});
