import {
  Card,
  Center,
  VStack,
  Image,
  SimpleGrid,
  GridItem,
} from "@chakra-ui/react";
import { ViewHeader, ViewText } from "../../components/ViewStyle/ViewStyle";
import { GoogleMap, useJsApiLoader } from "@react-google-maps/api";
// import pinred from "../../features/OCVMap/pin/pinred.png";
import useCoordinates from "../../hooks/useCoordinates";

export default function ContactCard({
  manifestData,
  viewData,
  anchorID,
}: Record<string, any>): JSX.Element {
  const contactLine1 = viewData.contactLine1;
  const phoneNumber = viewData.phoneNumber;
  const emailAddress = viewData.emailAddress;
  const address = viewData.mailingAddress;
  const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
    googleMapsApiKey: "AIzaSyAEOZZNm6jFVe3j3ISl_Ha9BeODMYrdqaY",
  });
  const addy = encodeURIComponent(address);
  const { data } = useCoordinates(addy);

  const options = {
    scrollwheel: true,
    gestureHandling: "auto",
  };
  // const coordinates = { lat: 37.783333, lng: -122.416667 };
  const coordinates = {
    lat: parseFloat(data.candidates[0].location.y),
    lng: parseFloat(data.candidates[0].location.x),
  };
  return (
    <section
      data-testid={"contactCard"}
      id={anchorID}
      style={{
        background: viewData.config.bgColor ? viewData.config.bgColor : "#eee",
        width: "100%",
        height: "100%",
        gap: "1rem",
        padding: "2rem 0rem",
      }}
    >
      <Center>
        <Card
          bg="white"
          width="1000px"
          py="2rem"
          px="1rem"
        >
          <VStack>
            <ViewHeader titleColor={viewData.config.titleColor}>
              {contactLine1}
            </ViewHeader>
            {isLoaded && (
              <GoogleMap
                options={options}
                mapContainerStyle={{
                  height: `30vh`,
                  width: `100%`,
                  marginTop: `2rem`,
                }}
                center={coordinates}
                zoom={15}
              ></GoogleMap>
            )}
            <SimpleGrid columns={[1, 1, 3]}>
              <GridItem>
                <Center>
                  <Image
                    src={
                      manifestData?.["stylesheet"]["images"]?.["titleImage"]?.[
                        "url"
                      ]
                    }
                    alt={
                      manifestData?.["stylesheet"]["images"]?.["titleImage"]?.[
                        "altText"
                      ]
                    }
                    verticalAlign="middle"
                    display="inline"
                    maxWidth="75px"
                  />
                </Center>
              </GridItem>
              <GridItem></GridItem>
              <GridItem>
                <ViewText textColor="black">{phoneNumber}</ViewText>
                <ViewText textColor="black">{emailAddress}</ViewText>
              </GridItem>
            </SimpleGrid>
          </VStack>
        </Card>
      </Center>
    </section>
  );
}