/**
 *
 * SourceList
 *
 */
import React, { useState } from 'react';
import { SourceBase } from '../../types';
import { OverlayContainer } from '@react-aria/overlays';

import '../../styles/global.css';
import styles from './SourceList.module.css';
import { Dialog } from '../Dialog';
import { Button } from '../Button';

interface Props {
  sources: SourceBase[];
}

export function SourceList(props: Props) {
  const { sources } = props;
  const [selectedSource, setSelectedSource] = useState<SourceBase>();

  const onClose = () => setSelectedSource(undefined);

  return (
    <div className={styles.container}>
      <div>
        <p className={styles.title}>Source{sources.length > 1 ? 's' : ''}:</p>
      </div>
      <div>
        <ul className={styles.list}>
          {sources.map((source) => (
            <li className={styles.listItem}>
              <Button color="none" onPress={() => setSelectedSource(source)}>
                <p className={styles.sourceButtonText}>{source.name}</p>
              </Button>
            </li>
          ))}
        </ul>
        {!!selectedSource && (
          <OverlayContainer>
            <Dialog onClose={onClose} title={selectedSource.name}>
              <a href={selectedSource.infoLink}>
                <p>{selectedSource.infoLink}</p>
              </a>
              <p>{selectedSource.description}</p>
            </Dialog>
          </OverlayContainer>
        )}
      </div>
    </div>
  );
}

export default SourceList;
