import './settings.css';

import { useRef, useState } from 'preact/hooks';

import Avatar from '../components/avatar';
import Icon from '../components/icon';
import NameText from '../components/name-text';
import store from '../utils/store';

/*
  Settings component that shows these settings:
  - Accounts list for switching
  - Dark/light/auto theme switch (done with adding/removing 'is-light' or 'is-dark' class on the body)
*/

export default ({ onClose }) => {
  // Accounts
  const accounts = store.local.getJSON('accounts');
  const currentAccount = store.session.get('currentAccount');
  const currentTheme = store.local.get('theme') || 'auto';
  const themeFormRef = useRef();
  const moreThanOneAccount = accounts.length > 1;
  const [currentDefault, setCurrentDefault] = useState(0);

  return (
    <div id="settings-container" class="box">
      <div>
        <button type="button" class="close-button plain" onClick={onClose}>
          <Icon icon="x" alt="Close" />
        </button>
      </div>
      <div>
        <h2>Accounts</h2>
        <ul class="accounts-list">
          {accounts.map((account, i) => {
            const isCurrent = account.info.id === currentAccount;
            const isDefault = i === (currentDefault || 0);
            return (
              <li>
                <div>
                  {moreThanOneAccount && (
                    <span class={`current ${isCurrent ? 'is-current' : ''}`}>
                      <Icon icon="check-circle" alt="Current" />
                    </span>
                  )}
                  <Avatar url={account.info.avatarStatic} size="xxl" />
                  <NameText account={account.info} showAcct />
                </div>
                <div class="actions">
                  {isDefault && moreThanOneAccount && (
                    <>
                      <span class="tag">Default</span>{' '}
                    </>
                  )}
                  {!isCurrent && (
                    <button
                      type="button"
                      class="light"
                      onClick={() => {
                        store.session.set('currentAccount', account.info.id);
                        location.reload();
                      }}
                    >
                      <Icon icon="transfer" /> Switch
                    </button>
                  )}
                  <div>
                    {!isDefault && moreThanOneAccount && (
                      <button
                        type="button"
                        class="plain small"
                        onClick={() => {
                          // Move account to the top of the list
                          accounts.splice(i, 1);
                          accounts.unshift(account);
                          store.local.setJSON('accounts', accounts);
                          setCurrentDefault(i);
                        }}
                      >
                        Set as default
                      </button>
                    )}
                    {isCurrent && (
                      <>
                        {' '}
                        <button
                          type="button"
                          class="plain small"
                          onClick={() => {
                            const yes = confirm(
                              'Are you sure you want to log out?',
                            );
                            if (!yes) return;
                            accounts.splice(i, 1);
                            store.local.setJSON('accounts', accounts);
                            location.reload();
                          }}
                        >
                          Log out
                        </button>
                      </>
                    )}
                  </div>
                </div>
              </li>
            );
          })}
        </ul>
        {moreThanOneAccount && (
          <p>
            <small>
              Note: <i>Default</i> account will always be used for first load.
              Switched accounts will persist during the session.
            </small>
          </p>
        )}
        <p style={{ textAlign: 'end' }}>
          <a href="/#/login" class="button" onClick={onClose}>
            Add new account
          </a>
        </p>
      </div>
      <div>
        <h2>Theme</h2>
        <form
          ref={themeFormRef}
          onInput={(e) => {
            console.log(e);
            e.preventDefault();
            const formData = new FormData(themeFormRef.current);
            const theme = formData.get('theme');
            const html = document.documentElement;

            if (theme === 'auto') {
              html.classList.remove('is-light', 'is-dark');
            } else {
              html.classList.toggle('is-light', theme === 'light');
              html.classList.toggle('is-dark', theme === 'dark');
            }
            document
              .querySelector('meta[name="color-scheme"]')
              .setAttribute('content', theme);

            if (theme === 'auto') {
              store.local.del('theme');
            } else {
              store.local.set('theme', theme);
            }
          }}
        >
          <div class="radio-group">
            <label>
              <input
                type="radio"
                name="theme"
                value="light"
                defaultChecked={currentTheme === 'light'}
              />
              <span>Light</span>
            </label>
            <label>
              <input
                type="radio"
                name="theme"
                value="dark"
                defaultChecked={currentTheme === 'dark'}
              />
              <span>Dark</span>
            </label>
            <label>
              <input
                type="radio"
                name="theme"
                value="auto"
                defaultChecked={
                  currentTheme !== 'light' && currentTheme !== 'dark'
                }
              />
              <span>Auto</span>
            </label>
          </div>
        </form>
      </div>
    </div>
  );
};