import React, { useState } from "react";
import PropTypes from "prop-types";
import BannerWrapper from "./styled-campaigns-banner";

import Button from "../button";
import Text from "../text";
import Loaders from "@appserver/common/components/Loaders";

const onButtonClick = (url) => {
  window.open(url, "_blank");
};

const CampaignsBanner = (props) => {
  const { headerLabel, subHeaderLabel, img, btnLabel, link, isLoading } = props;
  const [imageLoad, setImageLoad] = useState(false);

  const handleImageLoaded = () => {
    setImageLoad(true);
  };

  const onMouseDown = (e) => {
    e.preventDefault();
  };

  return (
    <BannerWrapper>
      <a href={link}>
        {isLoading ? (
          <Loaders.Rectangle height="32px" borderRadius="5px" />
        ) : (
          <>
            <Text fontWeight="700" fontSize="13px">
              {headerLabel}
            </Text>
            <Text
              className="banner-sub-header"
              fontWeight="500"
              fontSize="12px"
            >
              {subHeaderLabel}
            </Text>
          </>
        )}

        {isLoading ? (
          <Loaders.Rectangle height="150px" borderRadius="5px" />
        ) : (
          <>
            {!imageLoad && (
              <Loaders.Rectangle height="150px" borderRadius="5px" />
            )}
            <img
              src={img}
              onMouseDown={onMouseDown}
              onLoad={handleImageLoaded}
            />
          </>
        )}
      </a>

      {isLoading ? (
        <Loaders.Rectangle
          height="32px"
          borderRadius="5px"
          className="banner-btn"
        />
      ) : (
        <Button
          className="banner-btn"
          primary
          size="medium"
          isDisabled={false}
          disableHover={true}
          label={btnLabel}
          onClick={() => onButtonClick(link)}
        />
      )}
    </BannerWrapper>
  );
};

CampaignsBanner.propTypes = {
  id: PropTypes.string,
  className: PropTypes.string,
  style: PropTypes.object,
  headerLabel: PropTypes.string,
  subHeaderLabel: PropTypes.string,
  img: PropTypes.string,
  btnLabel: PropTypes.string,
  link: PropTypes.string,
  isLoading: PropTypes.bool,
};

CampaignsBanner.defaultProps = {
  id: undefined,
  className: undefined,
  style: undefined,
  isLoading: false,
};

export default CampaignsBanner;