import React from 'react'
import { Box, Heading, Image, Text } from '@chakra-ui/react'
import report_cover_image from '../../assets/mocks/images/report_cover_image.png'
import pg_logo from '../../assets/mocks/images/pg_logo.png'
import agent_avatar from '../../assets/mocks/images/agent_avatar.png'

export enum CoverPageType {
  Normal = 'Normal',
  CoBranded = 'CoBranded',
  WhiteLabeled = 'Whitelableled'
}

export type CoverPageProps = {
  agencyLogoUrl: any,
  propertyName: string,
  date: string,
  agentAvatarUrl: any,
  agentRen: string,
  agentTitle: string,
  agentEmail: string,
  agentMobileNo: string,
  agencyOfficeAddr: string,
  type?: CoverPageType
}

export const CoverPage = ({
  agencyLogoUrl,
  propertyName,
  date,
  agentAvatarUrl,
  agentRen,
  agentTitle,
  agentEmail,
  agentMobileNo,
  agencyOfficeAddr
}: CoverPageProps) => (
  <Box maxW="800px" height="1000px" pt="100px" position="relative" margin="0 auto" overflow="hidden">
    <Box
      border="3px solid"
      borderColor="primary"
      width="868px"
      borderLeft="none"
      height="700px"
      position="absolute"
      top="110px"
      bottom="0px"
      right="30px"
    />
    <Box
      bgImage={`url(${report_cover_image})`}
      className="report-box"
      padding="70px 0px 70px 0px"
      bgPos="0px 0px"
      bgRepeat="no-repeat"
      margin="0 auto">
      <Box
        maxWidth="600px"
        maxHeight="600px"
        margin="0 auto"
        textAlign="center"
        padding="84px 60px 130px 60px"
        backgroundColor="rgba(255, 255, 255, 0.9)">
        <Box>
          <Box>
            <Box
              minWidth="450px"
              minHeight="120px"
              margin="0 auto"
              bgColor="white"
              display="flex"
              justifyContent="center"
              alignItems="center">
              <Image src={agencyLogoUrl ? agencyLogoUrl : pg_logo} alt="Agency logo" width="400px" height="100px" />
            </Box>
            <Box marginTop="50px">
              <Heading as="h1" fontSize="40px" fontWeight="700" margin="0">
                ProxyPrice<sup>TM</sup>
              </Heading>
            </Box>
            <Box marginTop="83px">
              <Heading as="h2" fontSize="18px" fontWeight="400" textTransform="uppercase" margin="0">
                <b>{propertyName}</b>
                <br />
                Date: {date}
              </Heading>
            </Box>
          </Box>
        </Box>
      </Box>
    </Box>
    <Box display="flex" margin="0 auto" maxWidth="760px" marginTop="0px" padding="70px 0px 0px 0px">
      <Box width="75px">
        <Image src={agentAvatarUrl ? agentAvatarUrl : agent_avatar} alt="Agent avatar" width="55px" height="55px" />
      </Box>
      <Box paddingLeft="10px" fontSize="13px">
        <Text margin="0">
          <b>REN</b>: {agentRen} <b>Title: </b> {agentTitle}
        </Text>
        <Text>
          <b>Email:</b> {agentEmail}
        </Text>
        <Text>
          <b>Mobile No.:</b> {agentMobileNo}
        </Text>
        <Text paddingRight="170px">
          <b>Office Address:</b> {agencyOfficeAddr}
        </Text>
      </Box>
    </Box>
  </Box>
)