import React from "react";
import QRCode from "react-qr-code";

import { IModal } from "@ax/types";
import { Modal } from "@ax/components";

import * as S from "./style";

const LinkDeviceModal = (props: ILinkDeviceModalProps): JSX.Element => {
	const { isOpen, toggleModal, token } = props;

	const showQRCode = () => {
		const apiUrl = process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT;
		if (!apiUrl || !token) return <></>;

		const content = {
			apiUrl: apiUrl.endsWith("/") ? apiUrl.slice(0, -1) : apiUrl,
			token,
		};

		return (
			<S.QRWrapper>
				<QRCode value={JSON.stringify(content)} size={200} />
			</S.QRWrapper>
		);
	};

	return (
		<Modal isOpen={isOpen} hide={toggleModal} title="Link Device" size="S" height={406}>
			<S.ModalContent>
				<div>
					<p>
						Download the <strong>Griddo app</strong>, open it and <strong>scan this QR code</strong> to link your device
						to your user account.
					</p>
				</div>
				{showQRCode()}
			</S.ModalContent>
		</Modal>
	);
};

interface ILinkDeviceModalProps extends IModal {
	token: string;
}

export { LinkDeviceModal };
