'use strict';

var tslib_es6 = require('./tslib.es6-2c2ed574.js');
var React = require('react');
var core = require('@mantine/core');
var index$1 = require('./index-d54fe628.js');
var index = require('./index-a31ed3e1.js');
var togetherComponentGlobalContext = require('./utils-302bc65c.js');
var styled = require('@emotion/styled');
var togetherApiPaths = require('./togetherApiPaths.js');
var constants = require('./constants-762249c4.js');

function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

const StyledCardLink = styled__default["default"].div `
  .link-info-container {
    padding: 0.5rem 1rem;
    background: ${(props) => props.color || '#f4faff'};
  }
  .link-image-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: min(280px, 56.25%);
    .link-image-blur {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 110%;
      height: 110%;
      /* Add the blur effect */
      -webkit-filter: blur(8px);
      filter: blur(8px);
      object-fit: cover;
      object-position: center;
      opacity: 0.8;
      transform: translate(-50%, -50%);
    }
    .link-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
  }
  a {
    text-decoration: none;
  }
  &[data-is-marrybaby='true'] {
    overflow: hidden;
    border-radius: 1rem;
    .link-info-container {
      padding-bottom: 1rem;
      p {
        color: #2661ad;
      }
      .link-logo {
        max-width: 2rem;
        height: 13px;
        margin-right: 4px;
        object-fit: contain;
        vertical-align: middle;
      }
    }
    .link-image-wrapper {
      padding-top: min(360px, 56.25%);
      .link-image {
        object-fit: cover;
      }
    }
  }
`;

const CardLink = ({ title, url, image, logo, className, style, noRefetch, }) => {
    const { data: { locale, env: { isMarryBaby }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
    const [hideLogo, setHideLogo] = React.useState(false);
    const _theme = core.useMantineTheme();
    const noRefetchRef = React.useRef(noRefetch);
    noRefetchRef.current = noRefetch;
    const [previewData, setPreviewData] = React.useState(null);
    React.useEffect(() => {
        (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
            if (noRefetchRef.current)
                return;
            if (!url)
                return setPreviewData(null);
            setPreviewData((_data) => (Object.assign(Object.assign({}, _data), { isFetching: true })));
            togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.FETCH_PREVIEW, {
                _locale: locale,
            }), 'POST', {
                data: {
                    link: url,
                },
                headers: {
                    'Content-Type': 'application/json',
                },
            })
                .then((res) => {
                var _a, _b, _c;
                setHideLogo(false);
                setPreviewData({
                    title: (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.title,
                    url,
                    image: ((_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.image) || ((_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.logo),
                    // logo: meta.logo,
                });
            })
                .catch(() => {
                setPreviewData(null);
            });
        }))();
    }, [url]);
    const displayImage = (previewData === null || previewData === void 0 ? void 0 : previewData.image) || image;
    const displayTitle = (previewData === null || previewData === void 0 ? void 0 : previewData.title) || title;
    const displayLogo = (previewData === null || previewData === void 0 ? void 0 : previewData.logo) || logo;
    const displayUrl = (previewData === null || previewData === void 0 ? void 0 : previewData.url) || url;
    const urlParts = displayUrl
        .replace('http://', '')
        .replace('https://', '')
        .split(/[/?#]/);
    const domain = urlParts[0];
    const showDefaultRef = React.useRef(false);
    return (React__default["default"].createElement(StyledCardLink, { "data-is-marrybaby": isMarryBaby, className: `${className} no-replace-click`, style: style, color: _theme.colors[_theme.primaryColor][0] },
        React__default["default"].createElement("a", { href: displayUrl, target: "_blank", rel: "noreferrer" },
            displayImage && (React__default["default"].createElement("div", { className: "link-image-wrapper" },
                !isMarryBaby && (React__default["default"].createElement("img", { className: "link-image-blur", src: displayImage, onError: (e) => {
                        if (!showDefaultRef.current) {
                            showDefaultRef.current = true;
                            e.currentTarget.src = constants.DEFAULT_IMG;
                        }
                    }, loading: "lazy" })),
                React__default["default"].createElement("img", { className: "link-image", src: displayImage, onError: (e) => {
                        if (!showDefaultRef.current) {
                            showDefaultRef.current = true;
                            e.currentTarget.src = constants.DEFAULT_IMG;
                        }
                    }, loading: "lazy" }))),
            React__default["default"].createElement("div", { className: "link-info-container" },
                React__default["default"].createElement(index.Text, { size: "n1" },
                    isMarryBaby && displayLogo && !hideLogo && (React__default["default"].createElement("img", { className: "link-logo", src: displayLogo, onError: () => setHideLogo(true), loading: "lazy" })),
                    domain),
                React__default["default"].createElement(index$1.Heading, { tag: "h6" }, displayTitle)))));
};

exports.CardLink = CardLink;
