import { Flex, TextBadge, FilterInput, Markdown } from '@vizality/components';
import { ContentSidebar, Section } from '@vizality/components/dashboard';
import { SelectInput } from '@vizality/components/settings';
import React, { memo, useState } from 'react';
import { getModule } from '@vizality/webpack';

import Notifications from './Notifications';
import Appearance from './Appearance';
import Developer from './Developer';
import Advanced from './Advanced';
import Keybinds from './Keybinds';
import Commands from './Commands';
import Account from './Account';
import General from './General';

/**
 *
 * @private
 * @component
 */
const Body = memo(({ props, query, section }) => {
  if (query?.length) {
    return (
      <Section header={<Markdown source={`Showing results for "${query}"`} />} icon='search'>
        <General {...props} search={query} />
        <Account {...props} search={query} />
        <Appearance {...props} search={query} />
        <Notifications {...props} search={query} />
        <Keybinds {...props} search={query} />
        <Commands {...props} search={query} />
        <Developer {...props} search={query} />
        <Advanced {...props} search={query}/>
      </Section>
    );
  }
  switch (section) {
    case 'general':
      return (
        <Section header='General' icon='science'>
          <General {...props} />
        </Section>
      );
    case 'account':
      return (
        <Section header='Account' icon='circle-user'>
          <Account {...props} />
        </Section>
      );
    case 'appearance':
      return (
        <Section header='Appearance' icon='palette'>
          <Appearance {...props} />
        </Section>
      );
    case 'notifications':
      return (
        <Section header='Notifications' icon='bell'>
          <Notifications {...props} />
        </Section>
      );
    case 'keybinds':
      return (
        <Section header='Keybinds' icon='keyboard'>
          <Keybinds {...props} />
        </Section>
      );
    case 'commands':
      return (
        <Section header='Commands' icon='application-command'>
          <Commands {...props} />
        </Section>
      );
    case 'developer':
      return (
        <Section header='Developer' icon='robot'>
          <Developer {...props} />
        </Section>
      );
    case 'advanced':
      return (
        <Section header='Advanced' icon='wrench'>
          <Advanced {...props} />
        </Section>
      );
    default:
      return (
        <Section header='Account' icon='circle-user'>
          <General {...props} />
        </Section>
      );
  }
});

/**
 * Base settings page which controls the rendering of the subcategory settings pages.
 * @component
 * @returns {React.MemoExoticComponent<function(): React.ReactElement>}
 */
export default memo(({ section, search, ...other }) => {
  const [ _section ] = useState(section || 'general');
  const { marginBottom20 } = getModule('marginBottom20', 'marginBottom40');
  const [ searchSettings, setSearchSettings ] = $vz.api.settings.useSetting('searchSettings', 'all');
  const [ settingsSidebarCollapsed, setSettingsSidebarCollapsed ] = $vz.api.settings.useSetting('settingsSidebarCollapsed', false);
  const [ query, setQuery ] = useState(search || '');

  /**
   * Handles updating the current search filter.
   * @param {string} query Search query
   * @returns {void}
   */
  const handleQueryChange = query => {
    return setQuery(typeof query === 'string' ? query : '');
  };

  return (
    <>
      <div className='vz-dashboard-settings-search-outer-wrapper'>
        <FilterInput
          value={query}
          onChange={handleQueryChange}
          className='vz-dashboard-settings-search-wrapper'
          size={FilterInput.Sizes.LARGE}
        />
        {/* <SelectInput
          value={searchSettings}
          options={[
            {
              value: 'all',
              label: 'All'
            },
            {
              value: 'category',
              label: 'Category'
            }
          ]}
          onChange={evt => setSearchSettings(evt?.value)}
        /> */}
      </div>
      <Flex className='vz-dashboard-settings-content-wrapper'>
        <Flex direction={Flex.Direction.VERTICAL} className='vz-dashboard-settings-content-wrapper-inner'>
          <Flex className='vz-dashboard-settings-content' vz-section={_section}>
            <div className='vz-dashboard-settings-content-inner'>
              <Body props={other} query={query} section={_section} />
            </div>
          </Flex>
        </Flex>
        <ContentSidebar
          header='Categories'
          collapsed={settingsSidebarCollapsed}
          onToggle={() => setSettingsSidebarCollapsed(!settingsSidebarCollapsed)}
        >
          <ContentSidebar.NavItem
            icon='science'
            route='/vizality/settings/general'
            selected={_section === 'general'}
            tooltip={settingsSidebarCollapsed && 'General'}
            tooltipPosition='left'
          >
            General
          </ContentSidebar.NavItem>
          <ContentSidebar.NavItem
            icon='circle-user'
            route='/vizality/settings/account'
            selected={_section === 'account'}
            tooltip={settingsSidebarCollapsed && 'Account'}
            tooltipPosition='left'
            disabled
          >
            Account
          </ContentSidebar.NavItem>
          <ContentSidebar.NavItem
            icon='palette'
            route='/vizality/settings/appearance'
            selected={_section === 'appearance'}
            tooltip={settingsSidebarCollapsed && 'Appearance'}
            tooltipPosition='left'
            disabled
          >
            Appearance<TextBadge text='SOON™' />
          </ContentSidebar.NavItem>
          <ContentSidebar.NavItem
            icon='bell'
            route='/vizality/settings/notifications'
            selected={_section === 'notifications'}
            tooltip={settingsSidebarCollapsed && 'Notifications'}
            tooltipPosition='left'
          >
            Notifications
          </ContentSidebar.NavItem>
          <ContentSidebar.NavItem
            icon='keyboard'
            route='/vizality/settings/keybinds'
            selected={_section === 'keybinds'}
            tooltip={settingsSidebarCollapsed && 'Keybinds'}
            tooltipPosition='left'
            disabled
          >
            Keybinds
          </ContentSidebar.NavItem>
          <ContentSidebar.NavItem
            icon='application-command'
            route='/vizality/settings/commands'
            selected={_section === 'commands'}
            tooltip={settingsSidebarCollapsed && 'Commands'}
            tooltipPosition='left'
          >
            Commands
          </ContentSidebar.NavItem>
          <ContentSidebar.NavItem
            icon='robot'
            route='/vizality/settings/developer'
            selected={_section === 'developer'}
            tooltip={settingsSidebarCollapsed && 'Developer'}
            tooltipPosition='left'
          >
            Developer
          </ContentSidebar.NavItem>
          <ContentSidebar.NavItem
            icon='wrench'
            route='/vizality/settings/advanced'
            selected={_section === 'advanced'}
            tooltip={settingsSidebarCollapsed && 'Advanced'}
            tooltipPosition='left'
          >
            Advanced
          </ContentSidebar.NavItem>
        </ContentSidebar>
      </Flex>
    </>
  );
});
