import React, { FunctionComponent } from 'react';
import { Workgroup } from '../../types/workgroup';
import { InfoForm } from './InfoForm';
import { useUpdateWorkgroupMutation, useCreateWorkgroupMutation } from '../../gql/mutations/workgroups';
import { useHistory } from 'react-router';

export interface InfoPanelProps {
  workgroup: Workgroup
}

export const InfoPanel: FunctionComponent<InfoPanelProps> = ({ workgroup }) => {
  const [ updateWorkgroup, updateWorkgroupMutation ] = useUpdateWorkgroupMutation();
  const [ createWorkgroup, createWorkgroupMutation ] = useCreateWorkgroupMutation();
  const history = useHistory();
  const isLoading = updateWorkgroupMutation.loading || createWorkgroupMutation.loading;

  const onWorkgroupChange = (formWorkgroup: Workgroup) => {
    const variables: any = { changes: {} };
    
    if (workgroup.name !== formWorkgroup.name) {
      variables.changes.name = formWorkgroup.name;
    }

    if (Object.keys(variables.changes).length === 0) return;

    const isCreation = workgroup.id === '';
    if (isCreation) {
      createWorkgroup({variables})
        .then(({ data: { createWorkgroup } }) => {
          history.push(`/workgroups/${createWorkgroup.id}`);
        });
    } else {
      variables.workgroupId = workgroup.id;
      updateWorkgroup({variables});
    }
  };

  return (
    <nav className="panel">
      <p className="panel-heading">
        Informations
      </p>
      <div className="panel-block">
        { !isLoading ? <InfoForm workgroup={workgroup} onChange={onWorkgroupChange} /> : null }
      </div>
    </nav>
  );
}