import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useState, useEffect } from "react";
import { Close } from "@nutui/icons-react";
import classNames from "classnames";
import Popover from "../popover";
import { getRect } from "../../hooks/use-client-rect";
import { ComponentDefaults } from "../../utils/typings";
import { useConfig } from "../configprovider";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
    visible: false,
    type: 'step',
    location: 'bottom',
    mask: true,
    maskWidth: '',
    maskHeight: '',
    offset: [
        8,
        10
    ],
    title: '',
    next: '',
    prev: '',
    complete: '',
    showPrev: true,
    closeOnOverlayClick: true
});
var classPrefix = 'nut-tour';
export var Tour = function(props) {
    var locale = useConfig().locale;
    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, className = _ref.className, title = _ref.title, closeOnOverlayClick = _ref.closeOnOverlayClick, showPrev = _ref.showPrev, list = _ref.list, type = _ref.type, location = _ref.location, visible = _ref.visible, mask = _ref.mask, maskWidth = _ref.maskWidth, maskHeight = _ref.maskHeight, offset = _ref.offset, next = _ref.next, prev = _ref.prev, complete = _ref.complete, onClose = _ref.onClose, onChange = _ref.onChange, rest = _object_without_properties(_ref, [
        "children",
        "className",
        "title",
        "closeOnOverlayClick",
        "showPrev",
        "list",
        "type",
        "location",
        "visible",
        "mask",
        "maskWidth",
        "maskHeight",
        "offset",
        "next",
        "prev",
        "complete",
        "onClose",
        "onChange"
    ]);
    var _useState = _sliced_to_array(useState(false), 2), showTour = _useState[0], setShowTour = _useState[1];
    var _useState1 = _sliced_to_array(useState(false), 2), showPopup = _useState1[0], setShowPopup = _useState1[1];
    var _useState2 = _sliced_to_array(useState(0), 2), active = _useState2[0], setActive = _useState2[1];
    var _useState3 = _sliced_to_array(useState({
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        width: 0,
        height: 0
    }), 2), maskRect = _useState3[0], setMaskRect = _useState3[1];
    var classes = classNames(classPrefix, className);
    useEffect(function() {
        if (visible) {
            getRootPosition();
        }
        setActive(0);
        setShowTour(visible);
        setShowPopup(visible);
    }, [
        visible
    ]);
    useEffect(function() {
        if (visible) {
            setShowPopup(true);
            getRootPosition();
        }
    }, [
        active
    ]);
    var getRootPosition = function() {
        var el = document.querySelector("#".concat(list[active].target));
        var rect = getRect(el);
        setMaskRect(rect);
    };
    var maskStyle = function() {
        var width = maskRect.width, height = maskRect.height, left = maskRect.left, top = maskRect.top;
        var center = [
            left + width / 2,
            top + height / 2
        ] // 中心点 【横，纵】
        ;
        var w = Number(maskWidth || width);
        var h = Number(maskHeight || height);
        var styles = {
            width: "".concat(w + +offset[1] * 2, "px"),
            height: "".concat(h + +offset[0] * 2, "px"),
            top: "".concat(center[1] - h / 2 - +offset[0], "px"),
            left: "".concat(center[0] - w / 2 - +offset[1], "px")
        };
        return styles;
    };
    var maskClose = function(e) {
        setShowTour(false);
        setShowPopup(false);
        onClose && onClose(e);
    };
    var handleClickMask = function(e) {
        closeOnOverlayClick && maskClose(e);
    };
    var changeStep = function(type) {
        if (type === 'next') {
            setActive(active + 1);
            onChange && onChange(active + 1);
        } else {
            setActive(active - 1);
            onChange && onChange(active - 1);
        }
        setShowPopup(false);
    };
    return /*#__PURE__*/ React.createElement("div", _object_spread({
        className: classes
    }, rest), /*#__PURE__*/ React.createElement("div", {
        className: "nut-tour-masked",
        style: {
            display: showTour ? 'block' : 'none'
        },
        onClick: handleClickMask
    }), list.map(function(item, index) {
        return /*#__PURE__*/ React.createElement("div", {
            key: index,
            style: {
                height: 0
            }
        }, index === active && /*#__PURE__*/ React.createElement(React.Fragment, null, showTour && /*#__PURE__*/ React.createElement("div", {
            className: "".concat(mask ? 'nut-tour-mask' : 'nut-tour-mask nut-tour-mask-none'),
            id: "nut-tour-popid",
            style: maskStyle()
        }), /*#__PURE__*/ React.createElement(Popover, {
            visible: showPopup,
            location: item.location || location,
            targetId: "nut-tour-popid",
            closeOnOutsideClick: false,
            offset: item.popoverOffset || [
                0,
                12
            ],
            arrowOffset: item.arrowOffset || 0
        }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null, children || /*#__PURE__*/ React.createElement(React.Fragment, null, type === 'step' && /*#__PURE__*/ React.createElement("div", {
            className: "nut-tour-content"
        }, title && /*#__PURE__*/ React.createElement("div", {
            className: "nut-tour-content-top"
        }, /*#__PURE__*/ React.createElement("div", {
            onClick: function(e) {
                return maskClose(e);
            }
        }, /*#__PURE__*/ React.createElement(Close, {
            className: "nut-tour-content-top-close"
        }))), /*#__PURE__*/ React.createElement("div", {
            className: "nut-tour-content-inner"
        }, item.content), /*#__PURE__*/ React.createElement("div", {
            className: "nut-tour-content-bottom"
        }, /*#__PURE__*/ React.createElement("div", {
            className: "nut-tour-content-bottom-init"
        }, active + 1, "/", list.length), /*#__PURE__*/ React.createElement("div", {
            className: "nut-tour-content-bottom-operate"
        }, active !== 0 && showPrev && /*#__PURE__*/ React.createElement("div", {
            className: "nut-tour-content-bottom-operate-btn",
            onClick: function() {
                return changeStep('prev');
            }
        }, prev || locale.tour.prevStepText), list.length - 1 === active && /*#__PURE__*/ React.createElement("div", {
            className: "nut-tour-content-bottom-operate-btn active",
            onClick: function(e) {
                return maskClose(e);
            }
        }, complete || locale.tour.completeText), list.length - 1 !== active && /*#__PURE__*/ React.createElement("div", {
            className: "nut-tour-content-bottom-operate-btn active",
            onClick: function() {
                return changeStep('next');
            }
        }, next || locale.tour.nextStepText)))), type === 'tile' && /*#__PURE__*/ React.createElement("div", {
            className: "nut-tour-content nut-tour-content-tile"
        }, /*#__PURE__*/ React.createElement("div", {
            className: "nut-tour-content-inner"
        }, item.content)))))));
    }));
};
Tour.displayName = 'NutTour';
