import React, { FunctionComponent, useState, useEffect, ChangeEvent } from 'react';
import { DecisionSupportFile, DecisionSupportFileStatus } from '../../types/decision';
import { useWorkgroups } from '../../gql/queries/workgroups';
import { useUserProfile } from '../../gql/queries/profile';
import { inWorkgroup } from '../../types/workgroup';
import { DecisionSupportFileUpdaterProps } from './DecisionSupportFileUpdaterProps';
import { asDate } from '../../util/date';
import { Link } from 'react-router-dom';

export interface MetadataPanelProps extends DecisionSupportFileUpdaterProps {};

export const MetadataPanel: FunctionComponent<MetadataPanelProps> = ({ dsf, updateDSF, readOnly }) => {
  const { user } = useUserProfile();
  const { workgroups } = useWorkgroups();

  const [ userOpenedWorkgroups, setUserOpenedWorkgroups ] = useState([]);

  useEffect(() => {
    const filtered = workgroups.filter(wg => !wg.closedAt && inWorkgroup(user, wg));
    setUserOpenedWorkgroups(filtered);
  }, [workgroups, user])

  const onStatusChanged = (evt: ChangeEvent<HTMLSelectElement>) => {
    const status = evt.currentTarget.value as DecisionSupportFileStatus;
    updateDSF({ ...dsf, status });
  };

  const onWorkgroupChanged = (evt: ChangeEvent<HTMLSelectElement>) => {
    const workgroupId = evt.currentTarget.value;
    const workgroup = workgroups.find(wg => wg.id === workgroupId);
    updateDSF({ ...dsf, workgroup });
  };

  return (
    <nav className="panel">
      <p className="panel-heading">
        Métadonnées
      </p>
      <div className="panel-block">
        <div style={{width:'100%'}}>
          <div className="field">
            <div className="label">Groupe de travail</div>
            {
              readOnly && dsf.workgroup !== null ?
              <Link to={`/workgroups/${dsf.workgroup.id}`}>{dsf.workgroup.name}</Link> :
              <div className="control is-expanded">
                <div className="select is-fullwidth">
                  <select
                    disabled={readOnly}
                    onChange={onWorkgroupChanged} 
                    value={dsf.workgroup ? dsf.workgroup.id : ''}>
                    <option></option>
                    {
                      userOpenedWorkgroups.map(wg => {
                        return (
                          <option key={`wg-${wg.id}`} value={wg.id}>{wg.name}</option>
                        );
                      })
                    }
                  </select>
                </div>
              </div>
            }
          </div>
          <div className="field">
            <div className="label">Statut</div>
            <div className="control is-expanded">
              <div className="select is-fullwidth">
                <select
                  disabled={readOnly}
                  onChange={onStatusChanged} 
                  value={dsf.status}>
                  <option value="draft">Brouillon</option>
                  <option value="ready">Prêt à voter</option>
                  <option value="voted">Voté</option>
                  <option value="closed">Clôs</option>
                </select>
              </div>
            </div>
          </div>
          <div className="field">
            <div className="label">Créé le</div>
            <div className="control">
              <p>{asDate(dsf.createdAt).toISOString()}</p>
            </div>
          </div>
          <div className="field">
            <div className="label">Voté le</div>
            <div className="control">
              <p>{dsf.votedAt ? dsf.votedAt : '--'}</p>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};