import * as React from 'react';
import { ContainerDeprecated } from '@nova-hf/ui';
import Wrapper from 'components/app-layout/Wrapper';
import { ToggleItem } from 'components/toggle-items/ToggleItem';
import { ToggleItems } from 'components/toggle-items/ToggleItems';
import { ToggleItemsContainer } from 'components/toggle-items/ToggleItemsContainer';
import Hero from 'containers/hero/Hero';
import { inject } from 'mobx-react';
import { WithTranslation, withTranslation } from 'utils/i18n';

interface ISettingsProps extends WithTranslation {
  children: React.ReactNode;
  color: string;
  link: string;
  profiles?: any;
  authentication?: any;
}

@inject('profiles', 'authentication')
class Settings extends React.Component<ISettingsProps> {
  forms: any = [];
  render() {
    const {
      children,
      color,
      link,
      t,
      profiles: { isCompany },
      authentication: {
        isStaff,
        accountInput: { ssn },
      },
    } = this.props;

    return (
      <Wrapper>
        <Hero title={t('settings')} color={color} />
        <ContainerDeprecated underBar withStickyBar row>
          <ToggleItems>
            <ToggleItem
              title={t('sideMenu.about')}
              href={`/${ssn}/stillingar`}
              currentLink={link}
              color={color}
            />
            {isCompany && (
              <ToggleItem
                title={t('sideMenu.departments')}
                href={`/${ssn}/stillingar/deildir`}
                currentLink={link}
                color={color}
              />
            )}
            <ToggleItem
              title={t('sideMenu.paymentType')}
              href={`/${ssn}/stillingar/payment`}
              currentLink={link}
              color={color}
            />
            {isStaff && (
              <ToggleItem
                title={'Skilaboð'}
                href={`/${ssn}/stillingar/skilabod`}
                currentLink={link}
                color={color}
              />
            )}
            {isStaff && (
              <ToggleItem
                title={'Lokanir'}
                href={`/${ssn}/stillingar/lokanir`}
                currentLink={link}
                color={color}
              />
            )}
            {isCompany && (
              <ToggleItem
                title="Tengiliðir"
                href={`/${ssn}/stillingar/tengilidir`}
                currentLink={link}
                color={color}
              />
            )}
          </ToggleItems>
          <ToggleItemsContainer>
            {React.Children.toArray(children).map((c: any) => React.cloneElement(c, { color }))}
          </ToggleItemsContainer>
        </ContainerDeprecated>
      </Wrapper>
    );
  }
}

export default withTranslation('settings')(Settings);