import React, { useState, useMemo, useEffect } from 'react';
import { useApi } from './useApi';
import './App.css';

const Cluster = () => {
  return (
    <div className='Cluster'>cluster</div>
  );
};

type Identity = {
  lastName: string,
  middleName: string,
  firstName: string,
  descriptors: number[],
  id: number
  displayName: string,
};

interface IdentitiesProps {
  identities: Identity[]
};

const Identities = ({ identities } : IdentitiesProps) => {
  const identitiesJSX = useMemo(() => 
    identities.map((identity) => {
      const idPath = String(identity.id % 100).padStart(2, '0');
      return (<img 
        key={identity.id} 
        alt={identity.id.toString()} 
        src={`/faces/${idPath}/${identity.id}.jpg`}/>);
    }
  ), [ identities ]);

  return (
    <div className='Identities'>
      { identitiesJSX }
    </div>
  );
};

const App = () => {
  const [identities, setIdentities] = useState<Identity[]>([]);
  const { loading, data } = useApi(
    '../api/v1/faces'
  );

  useEffect(() => {
    if (data && data.length) {
      setIdentities(data as Identity[]);
    }
  }, [data]);

  return (
    <div className="App">
      <div className="Worksheet">
        { loading && <div>Loading...</div> }
        { !loading && <>
          <Cluster/>
          <Identities identities={identities}/>
        </> }
      </div>
    </div>
  );
}

export default App;