import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useDispatch, useSelector } from 'react-redux';
import { Link, NavLink } from 'react-router-dom';

import { logOut, switchAccount } from 'soapbox/actions/auth';
import { fetchOwnAccounts } from 'soapbox/actions/auth';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
import Account from 'soapbox/components/account';
import { Stack } from 'soapbox/components/ui';
import ProfileStats from 'soapbox/features/ui/components/profile_stats';
import { getFeatures } from 'soapbox/utils/features';

import { closeSidebar } from '../actions/sidebar';
import { makeGetAccount, makeGetOtherAccounts } from '../selectors';

import { HStack, Icon, IconButton, Text } from './ui';

const messages = defineMessages({
  followers: { id: 'account.followers', defaultMessage: 'Followers' },
  follows: { id: 'account.follows', defaultMessage: 'Follows' },
  profile: { id: 'account.profile', defaultMessage: 'Profile' },
  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
  blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
  domainBlocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Hidden domains' },
  mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
  filters: { id: 'navigation_bar.filters', defaultMessage: 'Muted words' },
  soapboxConfig: { id: 'navigation_bar.soapbox_config', defaultMessage: 'Soapbox config' },
  importData: { id: 'navigation_bar.import_data', defaultMessage: 'Import data' },
  accountMigration: { id: 'navigation_bar.account_migration', defaultMessage: 'Move account' },
  logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
});

const SidebarLink = ({ to, icon, text, onClick }) => (
  <NavLink className='group py-1 rounded-md' to={to} onClick={onClick}>
    <HStack space={2} alignItems='center'>
      <div className='bg-primary-50 dark:bg-slate-700 relative rounded inline-flex p-2'>
        <Icon src={icon} className='text-primary-600 h-5 w-5' />
      </div>

      <Text tag='span' weight='medium' theme='muted' className='group-hover:text-gray-800 dark:group-hover:text-gray-200'>{text}</Text>
    </HStack>
  </NavLink>
);

SidebarLink.propTypes = {
  to: PropTypes.string.isRequired,
  icon: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
};

const SidebarMenu = () => {
  const intl = useIntl();
  const dispatch = useDispatch();

  const logo = useSelector((state) => getSoapboxConfig(state).get('logo'));
  const features = useSelector((state) => getFeatures(state.get('instance')));
  const getAccount = makeGetAccount();
  const getOtherAccounts = makeGetOtherAccounts();
  const me = useSelector((state) => state.get('me'));
  const account = useSelector((state) => getAccount(state, me));
  const otherAccounts = useSelector((state) => getOtherAccounts(state));
  const sidebarOpen = useSelector((state) => state.get('sidebar').sidebarOpen);

  const closeButtonRef = React.useRef(null);

  const [switcher, setSwitcher] = React.useState(false);

  const onClose = () => dispatch(closeSidebar());

  const handleClose = () => {
    setSwitcher(false);
    onClose();
  };

  const handleSwitchAccount = (event, account) => {
    event.preventDefault();
    switchAccount(account);
    dispatch(switchAccount(account.get('id')));
  };

  const onClickLogOut = (event) => {
    event.preventDefault();
    dispatch(logOut(intl));
  };

  const handleSwitcherClick = (e) => {
    e.preventDefault();

    setSwitcher((prevState) => (!prevState));
  };

  const renderAccount = (account) => (
    <a href='/' className='block py-2' onClick={(event) => handleSwitchAccount(event, account)} key={account.get('id')}>
      <Account account={account} showProfileHoverCard={false} />
    </a>
  );

  React.useEffect(() => {
    dispatch(fetchOwnAccounts());
  }, []);

  if (!account) {
    return null;
  }

  const acct = account.get('acct');
  const classes = classNames('sidebar-menu__root', {
    'sidebar-menu__root--visible': sidebarOpen,
  });

  return (
    <div className={classes}>
      <div
        className={classNames({
          'fixed inset-0 bg-gray-600 bg-opacity-90 z-1000': true,
          'hidden': !sidebarOpen,
        })}
        role='button'
        onClick={handleClose}
      />

      <div className='sidebar-menu'>
        <div className='relative overflow-y-scroll overflow-auto h-full w-full'>
          <div className='p-4'>
            <Stack space={4}>
              <HStack alignItems='center' justifyContent='between'>
                <Link to='/' onClick={onClose}>
                  {logo ? (
                    <img alt='Logo' src={logo} className='h-5 w-auto min-w-[140px] cursor-pointer' />
                  ):  (
                    <Icon
                      alt='Logo'
                      src={require('@tabler/icons/icons/home.svg')}
                      className='h-6 w-6 text-gray-400 hover:text-gray-600 dark:text-gray-200 cursor-pointer'
                    />
                  )}
                </Link>

                <IconButton
                  title='close'
                  onClick={handleClose}
                  src={require('@tabler/icons/icons/x.svg')}
                  ref={closeButtonRef}
                  className='text-gray-400 hover:text-gray-600'
                />
              </HStack>

              <Stack space={1}>
                <Link to={`/@${acct}`} onClick={onClose}>
                  <Account account={account} showProfileHoverCard={false} />
                </Link>

                {account.staff && (
                  <Stack>
                    <button type='button' onClick={handleSwitcherClick} className='py-1'>
                      <HStack alignItems='center' justifyContent='between'>
                        <Text tag='span' size='sm' weight='medium'>Switch accounts</Text>

                        <Icon
                          src={switcher ? require('@tabler/icons/icons/chevron-up.svg') : require('@tabler/icons/icons/chevron-down.svg')} className='sidebar-menu-profile__caret'
                        />
                      </HStack>
                    </button>

                    {switcher && (
                      <div className='border-t border-solid border-gray-200'>
                        {otherAccounts.map(account => renderAccount(account))}
                      </div>
                    )}
                  </Stack>
                )}
              </Stack>

              <ProfileStats
                account={account}
                onClickHandler={handleClose}
              />

              <Stack space={2}>
                <hr />

                <SidebarLink
                  to={`/@${acct}`}
                  icon={require('@tabler/icons/icons/user.svg')}
                  text={intl.formatMessage(messages.profile)}
                  onClick={onClose}
                />

                <hr />

                <SidebarLink
                  to='/blocks'
                  icon={require('@tabler/icons/icons/ban.svg')}
                  text={intl.formatMessage(messages.blocks)}
                  onClick={onClose}
                />

                <SidebarLink
                  to='/mutes'
                  icon={require('@tabler/icons/icons/circle-x.svg')}
                  text={intl.formatMessage(messages.mutes)}
                  onClick={onClose}
                />

                <SidebarLink
                  to='/settings/preferences'
                  icon={require('@tabler/icons/icons/settings.svg')}
                  text={intl.formatMessage(messages.preferences)}
                  onClick={onClose}
                />

                {features.federating && (
                  <SidebarLink
                    to='/domain_blocks'
                    icon={require('@tabler/icons/icons/ban.svg')}
                    text={intl.formatMessage(messages.domainBlocks)}
                    onClick={onClose}
                  />
                )}

                {features.filters && (
                  <SidebarLink
                    to='/filters'
                    icon={require('@tabler/icons/icons/filter.svg')}
                    text={intl.formatMessage(messages.filters)}
                    onClick={onClose}
                  />
                )}

                {account.admin && (
                  <SidebarLink
                    to='/soapbox/config'
                    icon={require('@tabler/icons/icons/settings.svg')}
                    text={intl.formatMessage(messages.soapboxConfig)}
                    onClick={onClose}
                  />
                )}

                {features.importAPI && (
                  <SidebarLink
                    to='/settings/import'
                    icon={require('@tabler/icons/icons/cloud-upload.svg')}
                    text={intl.formatMessage(messages.importData)}
                    onClick={onClose}
                  />
                )}

                {(features.federating && features.accountMoving) && (
                  <SidebarLink
                    to='/settings/migration'
                    icon={require('@tabler/icons/icons/briefcase.svg')}
                    text={intl.formatMessage(messages.accountMigration)}
                    onClick={onClose}
                  />
                )}

                <hr />

                <SidebarLink
                  to='/auth/sign_out'
                  icon={require('@tabler/icons/icons/logout.svg')}
                  text={intl.formatMessage(messages.logout)}
                  onClick={onClickLogOut}
                />
              </Stack>
            </Stack>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SidebarMenu;