import React, { useState, useEffect } from 'react';
import { useHistory } from 'react-router';
import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer';
import styled from 'styled-components';
import { Accordion2, Box, Card, Grid, Heading, Link } from '@looker/components';
import { useSelector } from 'react-redux';
import { selectSdkLanguage } from '../../../state';
import { buildMethodPath } from '../../../utils';
import { DiffBanner } from './DiffBanner';
import { differ } from './docDiffUtils';
var DiffLink = styled(Link).withConfig({
  displayName: "DiffItem__DiffLink",
  componentId: "sc-1laajiy-0"
})(["color:", ";cursor:pointer;display:block;padding:", ";&:hover,&:visited,&:focus,&.active{color:", ";cursor:pointer;}"], _ref => {
  var {
    theme
  } = _ref;
  return theme.colors.ui5;
}, _ref2 => {
  var {
    theme
  } = _ref2;
  return "".concat(theme.space.xsmall, " ").concat(theme.space.large);
}, _ref3 => {
  var {
    theme
  } = _ref3;
  return theme.colors.key;
});
export var DiffMethodLink = _ref4 => {
  var {
    method,
    specKey
  } = _ref4;
  var history = useHistory();
  if (!method) return React.createElement(Heading, {
    as: "h4"
  }, "Missing in ".concat(specKey));
  var tag = method.schema.tags[0];
  var path = "".concat(buildMethodPath(specKey, tag, method.name));
  return React.createElement(DiffLink, {
    role: "link",
    onClick: () => {
      history.push(path);
    }
  }, "".concat(method.name, " for ").concat(specKey));
};
export var DiffItem = _ref5 => {
  var {
    item,
    leftKey,
    leftSpec,
    rightKey,
    rightSpec
  } = _ref5;
  var selectedSdkLanguage = useSelector(selectSdkLanguage);
  var [leftMethod, setLeftMethod] = useState(leftSpec.methods[item.name]);
  var [rightMethod, setRightMethod] = useState(rightSpec.methods[item.name]);
  var [method, setMethod] = useState(leftMethod || rightMethod);
  var [isOpen, setIsOpen] = useState(false);
  var [leftSide, setLeftSide] = useState('');
  var [rightSide, setRightSide] = useState('');
  useEffect(() => {
    var {
      lhs,
      rhs
    } = differ(item, leftSpec, rightSpec, selectedSdkLanguage);
    var lMethod = leftSpec.methods[item.name];
    var rMethod = rightSpec.methods[item.name];
    setLeftMethod(lMethod);
    setRightMethod(rMethod);
    setMethod(lMethod || rMethod);
    setLeftSide(lhs);
    setRightSide(rhs);
  }, [leftSpec, rightSpec, isOpen, selectedSdkLanguage]);

  var handleOpen = () => {
    setIsOpen(!isOpen);
  };

  return React.createElement(Card, {
    border: true,
    width: "100%"
  }, React.createElement(Accordion2, {
    indicatorPosition: "left",
    isOpen: isOpen,
    toggleOpen: handleOpen,
    label: React.createElement(DiffBanner, {
      item: item,
      method: method
    })
  }, React.createElement(Grid, {
    columns: 2
  }, React.createElement(Box, null, React.createElement(DiffMethodLink, {
    method: leftMethod,
    specKey: leftKey
  })), React.createElement(Box, null, React.createElement(DiffMethodLink, {
    method: rightMethod,
    specKey: rightKey
  }))), React.createElement(ReactDiffViewer, {
    oldValue: leftSide,
    newValue: rightSide,
    splitView: true,
    compareMethod: DiffMethod.LINES,
    showDiffOnly: true
  })));
};
//# sourceMappingURL=DiffItem.js.map