import React, { useState } from 'react';
import { useRouter } from 'next/router';
import Page from 'components/layout/Page';
import MenuLayout from 'components/layout/MenuLayout';
import WebsiteSettings from '../settings/WebsiteSettings';
import AccountSettings from '../settings/AccountSettings';
import ProfileSettings from '../settings/ProfileSettings';
import { useSelector } from 'react-redux';
import { FormattedMessage } from 'react-intl';

const WEBSITES = '/settings';
const ACCOUNTS = '/settings/accounts';
const PROFILE = '/settings/profile';

export default function Settings() {
  const user = useSelector(state => state.user);
  const [option, setOption] = useState(WEBSITES);
  const router = useRouter();
  const { pathname } = router;

  const menuOptions = [
    {
      label: <FormattedMessage id="label.websites" defaultMessage="Websites" />,
      value: WEBSITES,
    },
    {
      label: <FormattedMessage id="label.accounts" defaultMessage="Accounts" />,
      value: ACCOUNTS,
      hidden: !user?.is_admin,
    },
    {
      label: <FormattedMessage id="label.profile" defaultMessage="Profile" />,
      value: PROFILE,
    },
  ];

  return (
    <Page>
      <MenuLayout menu={menuOptions} selectedOption={option} onMenuSelect={setOption}>
        {pathname === WEBSITES && <WebsiteSettings />}
        {pathname === ACCOUNTS && <AccountSettings />}
        {pathname === PROFILE && <ProfileSettings />}
      </MenuLayout>
    </Page>
  );
}