/**
 *
 * DataVizCard
 *
 */
import React from 'react';
import Measure from 'react-measure';
import { SourceList } from '../../SourceList';
import { LoadingMessage } from '../../LoadingMessage';
import { MissingVizMessage } from '../../MissingVizMessage';
import { DataVizCardProps } from '../types';
import { Heading } from '../../Heading';
import { Button } from '../../Button';

export function DataVizCard(props: DataVizCardProps) {
  const {
    dataViz,
    geogIdentifier,
    colorScheme,
    CurrentViz,
    isLoading,
    // menu,
    onExplore,
    error,
  } = props;
  const { name, description } = dataViz || {};

  /* Keep track fo dimensions to send to vega charts */
  const [{ width, height }, setDimensions] = React.useState({
    width: 0,
    height: 0,
  });
  return (
    <div className="rounded border max-w-6xl relative bg-gray-100">
      <div className="rounded-t p-2.5 overflow-hidden bg-gray-100">
        {!!name && (
          <div className="flex layerItems-center">
            <div className="flex-grow">
              <Heading level={3} style={{ margin: 0 }}>
                {name}
              </Heading>
            </div>
            {/*<div>*/}
            {/*  <MenuTrigger>*/}
            {/*    <ActionButton isQuiet>*/}
            {/*      <More />*/}
            {/*    </ActionButton>*/}
            {/*    {menu}*/}
            {/*  </MenuTrigger>*/}
            {/*</div>*/}
          </div>
        )}
        <div>
          <p>{description || ''}</p>
        </div>
      </div>
      <div className="border-t border-b border-gray-400">
        <Measure
          bounds
          onResize={(contentRect) => {
            if (contentRect.bounds) setDimensions(contentRect.bounds);
          }}
        >
          {({ measureRef }) => (
            <div ref={measureRef}>
              <div aria-label="data presentation preview">
                {isLoading && <LoadingMessage />}
                {!!error && <MissingVizMessage error={error} />}
                {!isLoading &&
                  !!CurrentViz &&
                  !!dataViz &&
                  !!geogIdentifier && (
                    <CurrentViz
                      dataViz={dataViz}
                      geog={geogIdentifier}
                      colorScheme={colorScheme}
                      vizHeight={height - 15}
                      vizWidth={width - 15}
                    />
                  )}
              </div>
            </div>
          )}
        </Measure>
        <div className="pl-2.5 py-0">
          {!!dataViz && !!dataViz.sources && (
            <SourceList sources={dataViz.sources} />
          )}
        </div>
      </div>
      <div className="p-2.5 bg-gray-100 rounded-b">
        <div className="flex">
          <div className="flex-grow">
            {/*<StatusLight variant="neutral">Static Dataset</StatusLight>*/}
          </div>
          <div>
            <Button color="primary" onPress={onExplore}>
              Learn More
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}
