import React from 'react';
import QueueAnim from 'rc-queue-anim';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';

import {
  authorize,
  bcbsaScheduler,
  bcbsiAdmin,
  bcbsiScheduler,
  planAdmin,
  programsupportSupport,
  providerAdmin,
  superAdmin,
  techsupportAdmin,
} from 'utils/authorization';

import Datatable from './Datatable';

const style = {
  marginRight: 20, float: 'right'
};

const FloatingActionButtonExampleSimple = () => (
  <div>
    <FloatingActionButton href={'/#/sign-up'} primary={true} style={style}>
      <ContentAdd />
    </FloatingActionButton>
  </div>
);

const Page = () => (
  <section className="container-fluid with-maxwidth">

    <QueueAnim type="bottom" className="ui-animate">

      <div key="0">
        <FloatingActionButtonExampleSimple />
      </div>

      <div key="1"><h2 className="article-title">Authorized Users</h2>
        <Datatable />
      </div>
    </QueueAnim>
  </section>
);

const authorization = authorize(
  bcbsaScheduler,
  bcbsiAdmin,
  bcbsiScheduler,
  planAdmin,
  programsupportSupport,
  providerAdmin,
  superAdmin,
  techsupportAdmin,
);

module.exports = authorization(Page);
