"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const styles_1 = require("@mui/material/styles");
const system_1 = require("@mui/system");
const api_1 = require("@react-google-maps/api");
const react_core_1 = require("@selfcommunity/react-core");
const types_1 = require("@selfcommunity/types");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_intl_1 = require("react-intl");
const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
const string_1 = require("../../utils/string");
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
const constants_1 = require("./constants");
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
const react_1 = require("react");
const classes = {
    root: `${constants_1.PREFIX}-root`,
    title: `${constants_1.PREFIX}-title`,
    map: `${constants_1.PREFIX}-map`,
    locationTitle: `${constants_1.PREFIX}-location-title`,
    address: `${constants_1.PREFIX}-address`
};
const Root = (0, styles_1.styled)(Widget_1.default, {
    name: constants_1.PREFIX,
    slot: 'Root'
})(() => ({}));
/**
 * > API documentation for the Community-JS Group Info Widget component. Learn about the available props and the CSS API.
 *
 *
 * This component renders a widget containing the event info.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/EventLocationWidget)

 #### Import

 ```jsx
 import {EventLocationWidget} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCEventLocationWidget` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCEventLocationWidget-root|Styles applied to the root element.|
 |title|.SCEventLocationWidget-title|Styles applied to the title element.|
 |map|.SCEventLocationWidget-map|Styles applied to the map element.|
 |locationTitle|.SCEventLocationWidget-location-title|Styles applied to the location title element.|
 |address|.SCEventLocationWidget-address|Styles applied to the address element.|

 *
 * @param inProps
 */
function EventLocationWidget(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: constants_1.PREFIX
    });
    const { className, event, eventId } = props, rest = tslib_1.__rest(props, ["className", "event", "eventId"]);
    // STATE
    const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
    // PREFERENCES
    const { preferences } = (0, react_core_1.useSCPreferences)();
    // MEMO
    const geocodingApiKey = (0, react_1.useMemo)(() => {
        return preferences && react_core_1.SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY in preferences
            ? preferences[react_core_1.SCPreferences.PROVIDERS_GOOGLE_GEOCODING_API_KEY].value
            : null;
    }, [preferences]);
    const { isLoaded } = (0, api_1.useLoadScript)({
        googleMapsApiKey: geocodingApiKey,
        libraries: ['maps']
    });
    const mapOptions = {
        fullscreenControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        zoomControl: false // Disables the zoom control (+/- buttons)
    };
    if (!geocodingApiKey || (scEvent === null || scEvent === void 0 ? void 0 : scEvent.location) === types_1.SCEventLocationType.ONLINE) {
        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
    }
    /**
     * Loading event
     */
    if (!isLoaded || !scEvent) {
        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
    }
    /**
     * Renders root object
     */
    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title, gutterBottom: true }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventLocationWidget.title", defaultMessage: "ui.eventLocationWidget.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.map }, { children: (0, jsx_runtime_1.jsx)(api_1.GoogleMap, Object.assign({ mapContainerClassName: classes.map, center: {
                            lat: scEvent.geolocation_lat,
                            lng: scEvent.geolocation_lng
                        }, options: mapOptions, zoom: 15 }, { children: (0, jsx_runtime_1.jsx)(api_1.MarkerF, { position: {
                                lat: scEvent.geolocation_lat,
                                lng: scEvent.geolocation_lng
                            } }) })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.locationTitle }, { children: (0, string_1.formatEventLocationGeolocation)(scEvent.geolocation, true) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.address }, { children: (0, string_1.formatEventLocationGeolocation)(scEvent.geolocation) }))] }) })));
}
exports.default = EventLocationWidget;
