"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

const exotic_1 = require("exotic");

const state_1 = require("@skava/state");

const strategies_1 = require("@skava/forms/build/dist/new-forms/strategies");

const PluginsContext_1 = require("@skava/forms/build/dist/new-forms/plugins/PluginsContext");

const exports_1 = require("@skava/forms/build/dist/exports");

const exports_2 = require("@skava/forms/build/dist/exports");

const words_1 = require("@skava/ui/dist/words");

const Empty_1 = require("@skava/ui/dist/components/atoms/Empty");

const Item_1 = require("../../../abstractions/ShoppingList/Item");

const ShareList_1 = require("../ShareList");

const styled_1 = require("./styled");

function defaultRenderButtonGroup() {
  return react_1.default.createElement(Empty_1.Empty, null);
}

const inputsList = [{
  type: 'text',
  name: 'listName',
  value: '',
  autoFocus: true
}];
const formState = new exports_1.OneFormState().setInputsList(inputsList);

function defaultRenderListDetails(props, state) {
  const {
    itemCount,
    strategy
  } = props;
  const {
    isConfirming,
    isActive,
    listName,
    setIsVisible
  } = state;
  const count = exotic_1.isSafe(itemCount) && exotic_1.isString(itemCount) ? parseInt(itemCount, 10) : itemCount;

  const handleFocus = () => {
    setIsVisible(true);
  };

  const onPreFill = inputState => {
    inputState.setValue(listName);
  };

  return react_1.default.createElement(styled_1.ListNameWrapper, {
    isConfirming: isConfirming,
    isActive: isActive,
    onClick: handleFocus
  }, isActive === true ? react_1.default.createElement(strategies_1.ValidationStrategyContext.Provider, {
    value: strategy
  }, react_1.default.createElement(PluginsContext_1.PluginsContext.Provider, {
    value: [styled_1.StyledTextBoxPlugin]
  }, react_1.default.createElement(exports_2.OneObserverForm, {
    state: formState,
    renderButtonGroup: defaultRenderButtonGroup,
    onPreFill: onPreFill
  }))) : react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement(styled_1.StyledListName, null, listName), exotic_1.isSafe(count) && react_1.default.createElement(styled_1.StyledListCount, null, `(${count})`)));
}

function defaultRenderShareList(props) {
  const {
    listName,
    iconsList,
    onShare
  } = props;
  const attributes = {
    listName,
    iconsList,
    onShare
  };
  return react_1.default.createElement(ShareList_1.ShareList, Object.assign({}, attributes));
}

function defaultRenderRemoveList(props, state) {
  const {
    shoppingListCollapseState
  } = props;

  const handleRemoveClick = () => {
    state.handleConfirm();

    if (exotic_1.isUndefined(shoppingListCollapseState.removeConfirmationState)) {
      shoppingListCollapseState.removeConfirmationState = state;
    } else if (state.isConfirming === true) {
      shoppingListCollapseState.removeConfirmationState.handleConfirmCancel();
      shoppingListCollapseState.removeConfirmationState = state;
    }
  };

  return react_1.default.createElement(styled_1.StyledRemoveIcon, {
    type: "delete",
    onClick: handleRemoveClick
  });
}

function defaultRenderRemoveConfirmation(props, state) {
  const {
    onRemoveList,
    listName,
    identifier,
    shoppingListCollapseState
  } = props;

  const handleRemoveClosed = () => {
    state.handleConfirmCancel();
    shoppingListCollapseState.removeConfirmationState = undefined;
  };

  const handleRemoveConfirm = () => {
    handleRemoveClosed();

    if (exotic_1.isFunction(onRemoveList)) {
      onRemoveList({
        listName,
        identifier
      });
    }
  };

  const attributes = {
    confirmationText: words_1.wording.deleteList,
    confirmButtonLabel: words_1.wording.yes,
    cancelButtonLabel: words_1.wording.cancel,
    onConfirmation: handleRemoveConfirm,
    onCancel: handleRemoveClosed
  };
  return react_1.default.createElement(styled_1.StyledConfirmationCard, Object.assign({}, attributes));
}

exports.defaultRenderRemoveConfirmation = defaultRenderRemoveConfirmation;

function defaultRenderToggleSwitch(props, state) {
  const {
    onToggleStatus,
    listName,
    identifier,
    accessType
  } = props;
  const {
    isPrivate,
    setIsPrivate
  } = state;

  const handleToggle = args => {
    setIsPrivate(args.isSelected);

    if (exotic_1.isFunction(onToggleStatus)) {
      onToggleStatus(Object.assign({}, args, {
        listName,
        identifier
      }));
    }
  }; // const isPrivate = accessType.toLowerCase() === wording.private ? true : false


  const attributes = {
    iconType: 'switch',
    isAnimated: true,
    defaultLabel: words_1.wording.private,
    toggleLabel: words_1.wording.private,
    defaultLabelDataQa: 'qa-list-status',
    toggleLabelDataQa: 'qa-list-status',
    onToggle: handleToggle,
    isSelected: isPrivate
  };
  return react_1.default.createElement(styled_1.StyledToggleSwitch, Object.assign({}, attributes));
}

function defaultRenderActionBar(props, state) {
  const {
    isConfirming
  } = state;
  return react_1.default.createElement(react_1.default.Fragment, null, defaultRenderListDetails(props, state), isConfirming === false && react_1.default.createElement(Item_1.StyledButtonWrapper, null, defaultRenderRemoveList(props, state), defaultRenderShareList(props), defaultRenderToggleSwitch(props, state)));
}

exports.defaultRenderActionBar = defaultRenderActionBar;

function defaultRenderButton(props, state) {
  const {
    listName,
    identifier,
    onShowDetails,
    shoppingListCollapseState
  } = props;
  const {
    isConfirming,
    isExpanded
  } = state;
  const iconType = isExpanded ? 'expand_less' : 'expand_more';

  const handleListToggle = () => {
    state.handleToggle();

    if (exotic_1.isUndefined(shoppingListCollapseState.collapseState)) {
      shoppingListCollapseState.collapseState = state;
    } else if (state.isExpanded === true) {
      shoppingListCollapseState.collapseState.handleToggle();
      shoppingListCollapseState.collapseState = state;
    } else {
      shoppingListCollapseState.collapseState = undefined;
    }

    if (exotic_1.isFunction(onShowDetails)) {
      const eventProps = Object.assign({}, state, {
        listName,
        identifier
      });
      onShowDetails(eventProps);
    }
  };

  return (state_1.application.isDesktop === false || isConfirming === false) && react_1.default.createElement(styled_1.StyledListDetails, {
    text: words_1.wording.listDetails,
    breedType: "icon-with-text",
    iconAlignType: 'suffix',
    iconType: iconType,
    onClick: handleListToggle,
    isConfirming: isConfirming
  });
}

exports.defaultRenderButton = defaultRenderButton;

function defaultRenderExpandableView(props, state) {
  const {
    isConfirming
  } = state;
  const {
    productList,
    shoppingListDropDownList,
    onAddToCart,
    onRemoveItem,
    onFormSubmit
  } = props;
  const attributes = {
    productList,
    shoppingListDropDownList,
    onAddToCart,
    onRemoveItem,
    onFormSubmit
  };
  return react_1.default.createElement(styled_1.StyledProductListWrapper, {
    isConfirming: isConfirming
  }, react_1.default.createElement(styled_1.StyledProductList, Object.assign({}, attributes)));
}

exports.defaultRenderExpandableView = defaultRenderExpandableView;