MetaPhase-Consulting/State-TalentMAP

import PropTypes from 'prop-types';
import FA from 'react-fontawesome';
import { includes } from 'lodash';
import { Cell, Pie, PieChart } from 'recharts';
import ProfileSectionTitle from '../../ProfileSectionTitle';
import Spinner from '../../Spinner';
import SelectForm from '../../SelectForm';
import { Column, Row } from '../../Layout';

// we are not currently showing this page - it was previously behind static content flag
const BureauPage = (props) => {
  const {
    placeholderText,
  } = props;
  const data = [
    { name: 'Group A', value: 400 },
    { name: 'Group B', value: 300 },
    { name: 'Group C', value: 300 },
    { name: 'Group D', value: 200 },
  ];

  const COLORS = ['#102f51', '#cc3334', '#c49208', '#2970bc'];

  const RADIAN = Math.PI / 180;
  const renderCustomizedLabel = ({
    // eslint-disable-next-line react/prop-types
    cx, cy, midAngle, innerRadius, outerRadius, percent,
  }) => {
    const radius = (innerRadius + (outerRadius - innerRadius)) * 0.5;
    const x = cx + (radius * Math.cos(-midAngle * RADIAN));
    const y = cy + (radius * Math.sin(-midAngle * RADIAN));

    return (
      <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
        {`${(percent * 100).toFixed(0)}%`}
      </text>
    );
  };

  const bidCycles = [
    { value: null, text: 'Select Cycle' },
    { value: 'Fall 2020', text: 'Fall 2020' },
    { value: 'Winter 2020', text: 'Winter 2020' },
    { value: 'Spring 2021', text: 'Spring 2021' },
    { value: 'Summer 2021', text: 'Summer 2021' },
    { value: 'Fall 2021', text: 'Fall 2021' },
    { value: 'Winter 2021', text: 'Winter 2021' },
  ];

  const countries = [
    'Bahamas', 'Andorra', 'Vanuatu', 'Malawi', 'Equatorial Guinea', 'Sierra Leone', 'Mozambique',
    'France', 'Sudan', 'Iran', 'Malta', 'Papua New Guinea', 'Congo', 'Nauru', 'Guatemala',
    'Wallis and Futuna', 'Madagascar', 'Virgin Islands', 'Saint Pierre and Miquelon', 'Tajikistan',
    'Trinidad and Tobago', 'Iceland', 'Italy', 'Panama', 'Lithuania'];

  return (
    <div
      className={'usa-grid-full profile-content-inner-container position-search'}
    >
      {
        !placeholderText &&
          <Spinner type="homepage-position-results" size="big" />
      }
      <div className="usa-grid-full">
        <ProfileSectionTitle title="Bureau Dashboard" icon="tachometer" />
      </div>
      <div className="usa-grid-full">
        <Row className="usa-grid-full">
          <div className="usa-width-one-whole section">
            <h3>Positions Filled</h3>
            {placeholderText}
            <div className="all-inline">
              <SelectForm
                id="bid-cycle"
                options={bidCycles}
                label="Bid Cycle"
              // onSelectOption={myFunction}
              />
            </div>
            <div className="usa-width-one-whole">
              <div className="usa-width-one-fourth align-middle">
                <PieChart width={400} height={400}>
                  <Pie
                    data={data}
                    cx={200}
                    cy={200}
                    labelLine={false}
                    label={renderCustomizedLabel}
                    outerRadius={180}
                    fill="#8884d8"
                    dataKey="value"
                  >
                    {
                      // eslint-disable-next-line react/no-array-index-key
                      data.map((entry, index) => <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />)
                    }
                  </Pie>
                </PieChart>
                <div>All: 130/150</div>
              </div>
              <div className="usa-width-three-fourths">
                <div className="main-selector">
                  <FA name={'dot-circle-o'} />
                  <span>WHA (All positions)</span>
                </div>
                {countries.map((m) => {
                  const isSelected = includes(['Nauru', 'Malawi', 'Sudan', 'Guatemala', 'Italy'], m);
                  return (
                    <Column columns={2}>
                      <FA name={isSelected ? 'dot-circle-o' : 'circle-o'} />
                      <span>{m}</span>
                    </Column>
                  );
                })}
              </div>
            </div>
          </div>
          <div className="usa-width-one-whole section">
            <h3>Notifications</h3>
          </div>
        </Row>
      </div>
    </div>
  );
};

BureauPage.propTypes = {
  placeholderText: PropTypes.string,
};

BureauPage.defaultProps = {
  placeholderText: '',
};

export default BureauPage;