import React, { useContext, useEffect } from "react";
import { SiteContext } from "@arcteryx/components-contexts";
import styled from "styled-components";
import { useTranslation } from "react-i18next";
import { Body1, TextAlignment, H5 } from "@arcteryx/components-typography";
import PropTypes from "prop-types";

const SearchNoResultsContainer = styled.div`
  padding-top: 1rem;
  font-family: var(--font-helvetica) !important;
  font-size: 13px;
  line-height: 1.5em;
  overflow: auto;
  margin: auto;
  padding: 3em 1em 0;
  .search__no-results__query {
    color: var(--colour-black);
    margin: 0;
  }
  p {
    margin: auto;
  }
  h3 {
    text-transform: none;
  }
`;

const StyledBody1 = styled(Body1)`
  padding-left: 0.5rem;
  padding-right: 0.5rem;
`;

const StyledIframe = styled.iframe`
  display: block;
  border: none;
  height: 100vh;
  width: 100vw;
  margin-top: var(--space-green);
`;
const StyledDivNoResult = styled.div`
  overflow: auto;
  margin: auto;
  text-align: center;
  p {
    margin: auto;
  }
`;
export const SearchNoResults = ({ query, cmsUrl }) => {
  const { t } = useTranslation("container-search");
  const { market } = useContext(SiteContext);

  const updateQuery = () => {
    const elem = document.querySelector(".search__no-results__query");
    if (elem) {
      elem.innerHTML = `"${query}"`;
    }
  };

  useEffect(() => {
    updateQuery();
  }, [query]);

  if (market === "leaf") {
    return null;
  }

  return (
    <StyledDivNoResult>
      <StyledBody1 alignment={TextAlignment.INHERIT}>{t("showing results for")}</StyledBody1>
      <H5 alignment={TextAlignment.INHERIT} className="search__no-results__query">{query}</H5>
      <StyledBody1 alignment={TextAlignment.INHERIT}>{t("We couldn't find any products that match your search.")}</StyledBody1>
      <StyledBody1 alignment={TextAlignment.INHERIT}>{t("Here are a few alternate destinations that might help.")}</StyledBody1>
      {cmsUrl && <StyledIframe src={cmsUrl} title="Search No Result" />}
    </StyledDivNoResult>
  );
};

SearchNoResults.propTypes = {
  query: PropTypes.string,
  cmsUrl: PropTypes.string,
};