'use client'

import React, { useState } from 'react'
import { Product } from '@/types/products';
import { sendOfferNotification } from "@/lib/notifications";
import { getCurrencyIcon } from "@/lib/helpers";

interface Props {
    product: Product
}

const SendOffer = ({ product }: Props) => {
    console.log("SendOffer", product)
    const [offer, setOffer] = useState("")
    const [other, setOther] = useState("")
    const currency_icon = getCurrencyIcon(product.currency ? product.currency : 'USD')
    const modal_id  = "send_ofer_modal_" + product._id
    const modal_element = window.document.getElementById(modal_id)! as HTMLDialogElement

    // Handle Submitting
    const sendClick = (e: any) => {
        e.preventDefault()

        const offer_text = offer ? "My offer is " + currency_icon + offer + ". " : ""
        const other_text = other ? "%0A%0A" + other : ""
        const geddit_sell = "%0A%0ASent using [Gedd.it](https://gedd.it)!"
        const message = "Hi " + product.reddit_author + ", I am interested in your " + product.title + ". " + offer_text + other_text + geddit_sell

        // Notification
        sendOfferNotification("(2) Offer forwarded to reddit on " + product.title + " (" + product.reddit_subreddit + ") from seller " + product.reddit_author + "

")

        // Redirect to reddit
        const reddit_link = "https://www.reddit.com/message/compose?to=" + product.reddit_author + "&subject=Offer for " + product.title + " (via Gedd.it)&message=" + message
        window.open(reddit_link, "_blank")
    }

    const showModal = () => {
        // Notification
        console.log("ShowModal")
        modal_element.showModal()
        sendOfferNotification("(1) Send offer button clicked on " + product.title + " (" + product.reddit_subreddit + ") from seller " + product.reddit_author)
    }

    return (
        <div>
            <div className="btn btn-xs w-full min-[520px]:w-fit min-[620px]:btn-sm btn-outline text-white min-[520px]:absolute min-[520px]:bottom-0 min-[520px]:right-0" onClick={()=>showModal()}>Send Offer</div>
            <dialog id={modal_id} className="modal">
                <div className="modal-box">
                    <form method="dialog">
                        {/* if there is a button in form, it will close the modal */}
                        <button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
                    </form>
                    <h3 className="font-bold text-lg">{product.title}</h3>
                    {
                        product.price && <p className="text-sm">{currency_icon}{product.price}</p>
                    }
                    <form className='items-center mt-2'>
                        <button className="btn btn-primary btn-outline btn-sm rounded-r-none border-r-0 w-1/12 mx-0 px-0 text-center pointer-events-none">{currency_icon}</button>
                        <input type="text" className="input input-sm input-primary rounded-none border-l-0 w-6/12 mb-1 focus:outline-none" placeholder="Offer Amount" onChange={(e) => setOffer(e.target.value)}/>
                        <button className="btn btn-sm btn-primary btn-outline rounded-l-none w-5/12" type='submit' onClick={sendClick}>Send</button>
                        <textarea className="textarea textarea-primary textarea-block text-sm w-full h-16 focus:outline-none" placeholder="Other Details (feel free to leave blank)" onChange={(e) => setOther(e.target.value)}/>
                    </form>
                    <p className="mt-2 text-xs text-center">Offers are shared as prefilled Reddit messages</p>
                </div>
            </dialog>
        </div>
    )
}

export default SendOffer