import React, { useEffect, useState } from "react"
import styled from "styled-components"
import { Offer } from "credify-web-sdk"
import LogoCircle from "../resources/credify-colors-circle.svg"

const OfferItemWrapper = styled.div`
  display: flex;
  flex-direction: column;
  width: 400px;
  background: white;
  padding: 16px;
  border-radius: 10px;
  margin: auto;
  :hover {
    cursor: pointer;
  }
  @media only screen and (max-width: 428px) {
    width: 300px;
  }
`
const TopImageWrapper = styled.div`
  position: relative;
`
const OfferImage = styled.img`
  object-fit: scale-down;
  width: 100%;
  height: 231px;
`
const SpImage = styled.img`
  height: 50px;
  object-fit: contain;
  position: absolute;
  bottom: 13px;
  left: 13px;
  border-radius: 5px;
`
const SmallCredify = styled.img`
  width: 20px;
  height: 20px;
  object-fit: cover;
  position: absolute;
  top: 13px;
  left: 13px;
`
const OfferTitle = styled.p`
  font-family: Oswald;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ab2185 0%, #5a24b3 79.67%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 22px;
  margin-bottom: 22px;
`
const OfferEvaluationArea = styled.div`
  display: flex;
  flex-direction: column;
  background: #f1f1f1;
  border-radius: 10px;
  padding: 7px;
`
const EvaluationHeader = styled.p`
  font-family: Roboto Slab;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 17px;
  color: #999999;
`
const EvaluationTitle = styled.p`
  font-family: Roboto Slab;
  font-style: normal;
  font-weight: bold;
  font-size: 15px;
  line-height: 25px;
  text-transform: uppercase;
  color: #333333;
`

export function OfferItem({
  data,
  onOfferClick,
}: {
  data: Offer
  onOfferClick: any
}) {
  const hasEvaluationRes = data.evaluationResult?.rank !== 0
  const maxLevel = hasEvaluationRes
    ? data.campaign?.levels![data.evaluationResult?.rank! - 1]
    : null
  const [isSwiping, setSwiping] = useState(false)

  return (
    <OfferItemWrapper
      onMouseDown={() => {
        setSwiping(false)
      }}
      onMouseMove={() => {
        setSwiping(true)
      }}
      onMouseUp={(e) => {
        if (!isSwiping) {
          onOfferClick()
        }
        setSwiping(false)
      }}
    >
      <TopImageWrapper>
        <SmallCredify src={LogoCircle} />
        <OfferImage src={data.campaign?.thumbnailUrl} />
        {/*<SpImage src={data.campaign?.consumer?.logoUrl} />*/}
      </TopImageWrapper>
      <OfferTitle>{data.campaign?.name}</OfferTitle>
      <OfferEvaluationArea>
        {hasEvaluationRes && (
          <React.Fragment>
            <EvaluationHeader>Dành riêng cho bạn</EvaluationHeader>
            <EvaluationTitle>{maxLevel}</EvaluationTitle>
          </React.Fragment>
        )}
        {!hasEvaluationRes && (
          <EvaluationTitle>
            Đăng nhập để xem ưu đãi dành cho bạn
          </EvaluationTitle>
        )}
      </OfferEvaluationArea>
    </OfferItemWrapper>
  )
}