import React, { useState, useEffect } from 'react';
import { useHistory, useRouteMatch } from 'react-router-dom';
import { Box, Flex, FlexItem, IconButton, Label, Select, SelectMulti } from '@looker/components';
import { SyncAlt } from '@styled-icons/material/SyncAlt';
import { useSelector } from 'react-redux';
import { ApixSection } from '../../components';
import { selectCurrentSpec } from '../../state';
import { diffPath, getApixAdaptor } from '../../utils';
import { diffSpecs, standardDiffToggles } from './diffUtils';
import { DocDiff } from './DocDiff';
var diffToggles = [{
  label: 'Missing',
  value: 'missing'
}, {
  label: 'Status',
  value: 'status'
}, {
  label: 'Parameters',
  value: 'params'
}, {
  label: 'Type',
  value: 'type'
}, {
  label: 'Body',
  value: 'body'
}, {
  label: 'Response',
  value: 'response'
}];

var validateParam = function validateParam(specs) {
  var specKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
  return specs[specKey] ? specKey : '';
};

export var DiffScene = _ref => {
  var {
    specs,
    toggleNavigation
  } = _ref;
  var adaptor = getApixAdaptor();
  var history = useHistory();
  var spec = useSelector(selectCurrentSpec);
  var currentSpecKey = spec.key;
  var match = useRouteMatch("/".concat(diffPath, "/:l?/:r?"));
  var l = validateParam(specs, match === null || match === void 0 ? void 0 : match.params.l);
  var r = validateParam(specs, match === null || match === void 0 ? void 0 : match.params.r);
  var options = Object.entries(specs).map(_ref2 => {
    var [key, spec] = _ref2;
    return {
      value: key,
      label: "".concat(key, " (").concat(spec.status, ")")
    };
  });
  var [leftKey, setLeftKey] = useState(l || currentSpecKey);
  var [rightKey, setRightKey] = useState(r || '');
  var [leftApi, setLeftApi] = useState(specs[leftKey].api);
  var [rightApi, setRightApi] = useState(() => rightKey ? specs[rightKey].api : specs[leftKey].api);
  var [toggles, setToggles] = useState(standardDiffToggles);
  useEffect(() => {
    if (r !== rightKey) {
      setRightKey(r);
    }
  }, [r, rightKey]);
  useEffect(() => {
    if (l !== leftKey) {
      setLeftKey(l);
    }
  }, [l, leftKey]);
  useEffect(() => {
    toggleNavigation(false);
  }, []);
  var [delta, setDelta] = useState([]);

  var handleLeftChange = newLeft => {
    history.push("/".concat(diffPath, "/").concat(newLeft, "/").concat(rightKey));
  };

  var handleRightChange = newRight => {
    history.push("/".concat(diffPath, "/").concat(leftKey, "/").concat(newRight));
  };

  var handleSwitch = () => {
    history.push("/".concat(diffPath, "/").concat(rightKey, "/").concat(leftKey));
  };

  useEffect(() => {
    adaptor.fetchSpec(specs[leftKey]).then(spec => setLeftApi(spec.api));
  }, [leftKey]);
  useEffect(() => {
    if (rightKey in specs) {
      adaptor.fetchSpec(specs[rightKey]).then(spec => setRightApi(spec.api));
    }
  }, [rightKey]);
  useEffect(() => {
    if (leftApi && rightApi) {
      setDelta([...diffSpecs(leftApi, rightApi, toggles)]);
    }
  }, [leftApi, rightApi, toggles]);

  var handleTogglesChange = values => {
    var newToggles = values || [];
    setToggles(newToggles);
  };

  return React.createElement(ApixSection, null, React.createElement(Box, null, React.createElement(Flex, {
    bg: "AliceBlue",
    padding: "large",
    mb: "large",
    alignItems: "center"
  }, React.createElement(FlexItem, null, React.createElement(Label, {
    htmlFor: "base"
  }, "Base"), React.createElement(Select, {
    mt: "xxsmall",
    id: "base",
    name: "Left Version",
    value: leftKey,
    options: options,
    onChange: handleLeftChange
  })), React.createElement(IconButton, {
    label: "switch",
    size: "small",
    disabled: !leftKey || !rightKey,
    icon: React.createElement(SyncAlt, null),
    mt: "medium",
    onClick: handleSwitch
  }), React.createElement(FlexItem, null, React.createElement(Label, {
    htmlFor: "compare"
  }, "Compare"), React.createElement(Select, {
    mt: "xxsmall",
    id: "compare",
    name: "Right Version",
    placeholder: "Select a comparison...",
    value: rightKey,
    options: options,
    onChange: handleRightChange
  })), React.createElement(FlexItem, {
    flex: "2",
    ml: "large"
  }, React.createElement(Label, {
    htmlFor: "options"
  }, "Comparison Options"), React.createElement(SelectMulti, {
    mt: "xxsmall",
    id: "options",
    name: "toggles",
    placeholder: "Comparison options",
    defaultValues: toggles,
    onChange: handleTogglesChange,
    options: diffToggles
  })))), React.createElement(DocDiff, {
    delta: delta,
    leftKey: leftKey,
    leftSpec: leftApi,
    rightKey: rightKey,
    rightSpec: rightApi
  }));
};
//# sourceMappingURL=DiffScene.js.map