import React, { useEffect, useState } from 'react';
import { Grid, ButtonToggle, ButtonItem } from '@looker/components';
import { useParams, useHistory } from 'react-router-dom';
import { ApixSection, DocTitle, DocTypeSummary, Link } from '../../components';
import { buildTypePath } from '../../utils';
import { getMetaTypes } from './utils';
export var TypeTagScene = _ref => {
  var {
    api
  } = _ref;
  var {
    specKey,
    typeTag
  } = useParams();
  var history = useHistory();
  var [value, setValue] = useState('ALL');
  useEffect(() => {
    setValue('ALL');
  }, [typeTag]);
  var types = api.typeTags[typeTag];
  useEffect(() => {
    if (!types) {
      history.push("/".concat(specKey, "/types"));
    }
  }, [history, types]);

  if (!types) {
    return React.createElement(React.Fragment, null);
  }

  var tag = Object.values(api.spec.tags).find(tag => tag.name === typeTag);
  var metaTypes = getMetaTypes(types);
  return React.createElement(ApixSection, null, React.createElement(DocTitle, null, "".concat(tag.name, ": ").concat(tag.description)), React.createElement(ButtonToggle, {
    mb: "small",
    mt: "xlarge",
    value: value,
    onChange: setValue
  }, React.createElement(ButtonItem, {
    key: "ALL",
    px: "large",
    py: "xsmall"
  }, "ALL"), metaTypes.map(op => React.createElement(ButtonItem, {
    key: op,
    px: "large",
    py: "xsmall"
  }, op))), Object.values(types).map((type, index) => (value === 'ALL' || value === type.metaType.toString().toUpperCase()) && React.createElement(Link, {
    key: index,
    to: buildTypePath(specKey, tag.name, type.name)
  }, React.createElement(Grid, {
    columns: 1,
    py: "xsmall"
  }, React.createElement(DocTypeSummary, {
    key: index,
    type: type
  })))));
};
//# sourceMappingURL=TypeTagScene.js.map