import React, { useState, useEffect } from 'react';
import { Box, Card, DataTable, DataTableItem, Icon, Link, Space, Pagination } from '@looker/components';
import { findExampleLanguages } from '@looker/sdk-codegen';
import { CollapserCard } from '@looker/run-it';
import { InsertDriveFile } from '@styled-icons/material-outlined/InsertDriveFile';
import { useSelector } from 'react-redux';
import { selectSdkLanguage, selectExamplesLode } from '../../state';
import { exampleColumns, EMPTY_STRING, prepareExampleDataTable, PER_PAGE_COUNT, sortLanguagesByPreference } from './utils';
import { DocSdkExampleCell } from './DocSdkExampleCell';
export var DocSdkUsage = _ref => {
  var {
    method
  } = _ref;
  var examples = useSelector(selectExamplesLode);
  var sdkLanguage = useSelector(selectSdkLanguage);
  var [page, setPage] = useState(1);
  useEffect(() => {
    setPage(1);
  }, [method]);
  if (!examples) return React.createElement(React.Fragment, null);
  var languages = findExampleLanguages(examples, method.name);
  if (languages.length === 0) return React.createElement(React.Fragment, null);
  languages = sortLanguagesByPreference(languages, sdkLanguage);
  var {
    pageExamples,
    pageLimit,
    paginate
  } = prepareExampleDataTable(languages, examples, method.operationId, page);
  if (pageExamples.length === 0) return React.createElement(React.Fragment, null);
  return React.createElement(CollapserCard, {
    id: "examples",
    heading: "SDK Examples"
  }, React.createElement(Card, {
    height: "auto",
    px: "small",
    py: "xsmall",
    mt: "small"
  }, React.createElement(DataTable, {
    caption: "SDK Examples",
    columns: exampleColumns
  }, pageExamples.map((exampleRow, i) => {
    var _pageExamples;

    var isEmptyItem = exampleRow.filename === EMPTY_STRING;
    var isLastItem = (i + 1) % PER_PAGE_COUNT === 0 || i + 1 === pageExamples.length;
    var nextItemEmpty = ((_pageExamples = pageExamples[i + 1]) === null || _pageExamples === void 0 ? void 0 : _pageExamples.filename) === EMPTY_STRING;
    var hidden = isEmptyItem || isLastItem || nextItemEmpty;
    return React.createElement(DataTableItem, {
      id: exampleRow.permalink,
      key: exampleRow.permalink
    }, React.createElement(DocSdkExampleCell, {
      hideBorderBottom: hidden
    }, React.createElement(Space, {
      gap: "xsmall"
    }, !isEmptyItem && React.createElement(Icon, {
      icon: React.createElement(InsertDriveFile, null),
      color: "text1",
      size: "small"
    }), React.createElement(Link, {
      href: exampleRow.permalink,
      target: '_blank',
      role: "link"
    }, exampleRow.filename))), React.createElement(DocSdkExampleCell, {
      hideBorderBottom: hidden
    }, exampleRow.language), React.createElement(DocSdkExampleCell, {
      hideBorderBottom: hidden
    }, exampleRow.description), React.createElement(DocSdkExampleCell, {
      hideBorderBottom: hidden
    }, exampleRow.line));
  })), paginate && React.createElement(Box, {
    alignSelf: "center"
  }, React.createElement(Pagination, {
    current: page,
    pages: pageLimit,
    onChange: nextPage => {
      setPage(nextPage);
    }
  }))));
};
//# sourceMappingURL=DocSdkUsage.js.map