import { faLocationArrow, faSearch } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import axios from "axios";
import React, { useEffect, useState } from "react";
import { Button, Col, Container, Form, Row, Alert } from "react-bootstrap";
import useGeolocation from "react-hook-geolocation";
import { useTranslation } from "react-i18next";
import MaskMapIntro from "../assets/MaskMapIntro.svg";
import { useMaskData } from "../context/MaskDataContext";
import "../css/Search.css";

function Search() {
    const geoloc = useGeolocation();
    const [geolocState, setGeolocState] = useState(null);
    const [geolocWhenAvailable, setGeolocWhenAvailable] = useState(false);
    const { setCenterCoord } = useMaskData();

    const { t } = useTranslation();

    const [address, setAddress] = useState("");

    const fetchGeocode = async (address) => {
        let data;
        try {
            data = await axios.get(
                `${
                    process.env.NODE_ENV === "development"
                        ? "http://localhost:4000"
                        : "https://api.livecorona.co.kr"
                }/?address=${address}`
            );
            return data;
        } catch (error) {
            console.error(error);
            console.log("Failed to retrieve geocoding for: " + address);
        }
    };

    useEffect(() => {
        setAddress(localStorage.getItem("lastSearchedAddress"));
    }, []);

    useEffect(() => {
        if (!geoloc) {
            return;
        }

        // navigator.permissions is an experimental API that is
        // unsupported in iOS, so it needs a try-catch block
        try {
            navigator.permissions
                .query({ name: "geolocation" })
                .then((result) => {
                    setGeolocState(result.state);
                });
        } catch (error) {
            console.error(error);
            setGeolocState("unknown");
        }

        if (geolocWhenAvailable) {
            if (
                geoloc.accuracy != null ||
                geoloc.latitude != null ||
                geoloc.longitude != null
            ) {
                const coord = {
                    lat: geoloc.latitude,
                    lng: geoloc.longitude,
                };
                setCenterCoord(coord);
                console.log(coord);
            }
        }
    }, [geoloc, geolocWhenAvailable, setCenterCoord]);

    const onClickGeoloc = () => {
        if (geolocState !== "granted") {
            alert("위치 권한을 브라우저 설정에서 허용해야 사용할 수 있습니다");
        }

        setGeolocWhenAvailable(true);
    };

    const onClickAddress = async () => {
        if (address.length < 1) {
            alert("주소를 입력해 주세요.");
            return;
        }

        localStorage.setItem("lastSearchedAddress", address);

        let geocodes;
        try {
            geocodes = await fetchGeocode(address);
        } catch (error) {
            console.error(error);
            alert("주소를 찾을 수 없습니다. 다시 시도해 주십시오.");
            return;
        }

        console.log(geocodes.data);

        if (!geocodes.data.meta.totalCount) {
            alert("주소를 찾을 수 없습니다. 다시 시도해 주십시오.");
            return;
        }

        let coord = {
            lat: geocodes.data.addresses[0].y,
            lng: geocodes.data.addresses[0].x,
        };

        setCenterCoord(coord);
    };

    const handleFormSubmit = (e) => {
        e.preventDefault();
        onClickAddress();
    };

    return (
        <>
            <Container>
                <Row>
                    <Col>
                        <div className="text-center mb-5">
                            <img
                                src={MaskMapIntro}
                                alt="공적 마스크 판매처"
                                width="100vw"
                                className="mb-3"
                            />
                            <h1 className="title">
                                {t("searchMaskStores")}
                            </h1>
                        </div>
                    </Col>
                </Row>
                <Row className="justify-content-center mb-3 text-center">
                    <Col sm={12} md={6} lg={5}>
                        <Form onSubmit={handleFormSubmit}>
                            <Form.Group controlId="formBasicEmail">
                                <Form.Label>
                                    {t("addressInputLabel")}
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    placeholder=""
                                    value={address}
                                    onChange={(e) => setAddress(e.target.value)}
                                />
                                <Form.Text className="text-muted">
                                    {t("addressInputExample")}
                                </Form.Text>
                            </Form.Group>
                            <div className="d-flex flex-column mb-3">
                                <Button
                                    variant="primary"
                                    className="mb-2"
                                    onClick={onClickAddress}>
                                    <FontAwesomeIcon icon={faSearch} />{" "}
                                    {t("searchByAddress")}
                                </Button>
                                <Button
                                    variant="outline-primary"
                                    onClick={onClickGeoloc}>
                                    <FontAwesomeIcon icon={faLocationArrow} />{" "}
                                    {t("searchByGeoloc")}
                                </Button>
                            </div>
                            <Alert variant="info">
                                {t("notice.publicMaskShutdown")}
                            </Alert>
                        </Form>
                    </Col>
                </Row>
            </Container>
        </>
    );
}

export default Search;