"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _native = require("@react-navigation/native");
var _colorPalette = _interopRequireDefault(require("../../color-palette"));
var _colorIndicator = _interopRequireDefault(require("../../color-indicator"));
var _navBar = _interopRequireDefault(require("../bottom-sheet/nav-bar"));
var _segmentedControl = _interopRequireDefault(require("../segmented-control"));
var _utils = require("./utils");
var _body = _interopRequireDefault(require("../../panel/body"));
var _bottomSheetContext = require("../bottom-sheet/bottom-sheet-context");
var _colorControl = _interopRequireDefault(require("../../color-control"));
var _style = _interopRequireDefault(require("./style.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const HIT_SLOP = {
  top: 8,
  bottom: 8,
  left: 8,
  right: 8
};
const PaletteScreen = () => {
  const route = (0, _native.useRoute)();
  const navigation = (0, _native.useNavigation)();
  const {
    shouldEnableBottomSheetScroll
  } = (0, _element.useContext)(_bottomSheetContext.BottomSheetContext);
  const {
    label,
    onColorChange,
    onGradientChange,
    onColorCleared,
    colorValue,
    defaultSettings,
    hideNavigation = false
  } = route.params || {};
  const {
    segments,
    isGradient
  } = _utils.colorsUtils;
  const [currentValue, setCurrentValue] = (0, _element.useState)(colorValue);
  const isGradientColor = isGradient(currentValue);
  const selectedSegmentIndex = isGradientColor ? 1 : 0;
  const [currentSegment, setCurrentSegment] = (0, _element.useState)(segments[selectedSegmentIndex]);
  const isGradientSegment = currentSegment === _utils.colorsUtils.segments[1];
  const currentSegmentColors = !isGradientSegment ? defaultSettings.colors : defaultSettings.gradients;
  const allAvailableColors = defaultSettings?.allAvailableColors || [];
  const allAvailableGradients = currentSegmentColors.flatMap(({
    gradients
  }) => gradients).filter(Boolean);
  const horizontalSeparatorStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.horizontalSeparator, _style.default.horizontalSeparatorDark);
  const clearButtonStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.clearButton, _style.default.clearButtonDark);
  const selectedColorTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.colorText, _style.default.colorTextDark);
  const isSolidSegment = currentSegment === segments[0];
  const isCustomGadientShown = !isSolidSegment && isGradientColor;
  const setColor = color => {
    setCurrentValue(color);
    if (isSolidSegment && onColorChange && onGradientChange) {
      onColorChange(color);
    } else if (isSolidSegment && onColorChange) {
      onColorChange(color);
    } else if (!isSolidSegment && onGradientChange) {
      onGradientChange(color);
    }
  };
  function onClear() {
    setCurrentValue(undefined);
    if (onColorCleared) {
      onColorCleared();
    }
  }
  function onCustomPress() {
    if (isSolidSegment) {
      navigation.navigate(_utils.colorsUtils.screens.picker, {
        currentValue,
        setColor
      });
    } else {
      navigation.navigate(_utils.colorsUtils.screens.gradientPicker, {
        setColor,
        isGradientColor,
        currentValue
      });
    }
  }
  function getClearButton() {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
      accessibilityLabel: (0, _i18n.__)('Clear selected color'),
      onPress: onClear,
      hitSlop: HIT_SLOP,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: _style.default.clearButtonContainer,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: clearButtonStyle,
          children: (0, _i18n.__)('Reset')
        })
      })
    });
  }
  function getFooter() {
    if (onGradientChange) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_segmentedControl.default, {
        segments: segments,
        segmentHandler: setCurrentSegment,
        selectedIndex: segments.indexOf(currentSegment),
        addonLeft: currentValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorIndicator.default, {
          color: currentValue,
          style: _style.default.colorIndicator
        }),
        addonRight: currentValue && getClearButton()
      });
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: _style.default.footer,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: _style.default.flex,
        children: currentValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorIndicator.default, {
          color: currentValue,
          style: _style.default.colorIndicator
        })
      }), currentValue ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: selectedColorTextStyle,
        maxFontSizeMultiplier: 2,
        selectable: true,
        children: currentValue.toUpperCase()
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: _style.default.selectColorText,
        maxFontSizeMultiplier: 2,
        children: (0, _i18n.__)('Select a color above')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: _style.default.flex,
        children: currentValue && getClearButton()
      })]
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    children: [!hideNavigation && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_navBar.default, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_navBar.default.BackButton, {
        onPress: navigation.goBack
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_navBar.default.Heading, {
        children: [label, " "]
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: _style.default.colorPalettes,
      children: currentSegmentColors.map((palette, paletteKey) => {
        const paletteSettings = {
          colors: palette.colors,
          gradients: palette.gradients,
          allColors: allAvailableColors,
          allGradients: allAvailableGradients
        };
        // Limit to show the custom indicator to the first available palette
        const enableCustomColor = paletteKey === 0;
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorPalette.default, {
          enableCustomColor: enableCustomColor,
          label: palette.name,
          setColor: setColor,
          activeColor: currentValue,
          isGradientColor: isGradientColor,
          currentSegment: currentSegment,
          onCustomPress: onCustomPress,
          shouldEnableBottomSheetScroll: shouldEnableBottomSheetScroll,
          defaultSettings: paletteSettings
        }, paletteKey);
      })
    }), isCustomGadientShown && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: horizontalSeparatorStyle
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_body.default, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorControl.default, {
          label: (0, _i18n.__)('Customize Gradient'),
          onPress: onCustomPress,
          withColorIndicator: false
        })
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: horizontalSeparatorStyle
    }), getFooter()]
  });
};
var _default = exports.default = PaletteScreen;
//# sourceMappingURL=palette.screen.native.js.map