'use client'
import React, { useRef, useState } from 'react'
import styles from './getintouch.module.css'
import Navlink from '../Navlink/Navlink'
import Logo from '../../public/images/noble-logo.svg'
import locationIcon from '../../public/images/location-icon.svg'
import MailIcon from '../../public/images/mail-icon.svg'
import Image from 'next/image'
import AppDownload from '../AppDownload/AppDownload'
import { Slide } from 'react-awesome-reveal'
type ContactUsType = {
    username: string
    email: string
    description: string
}
type Validate = {
    formValue: ContactUsType
}

const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
const Getintouch = () => {
    const [isLoading, setisLoading] = useState(false)
    const [isSuccess, setisSuccess] = useState<boolean | string>(false)
    const [error, seterror] = useState<ContactUsType>({
        description: '',
        email: '',
        username: ''
    })
    const contactUs = useRef<ContactUsType>({
        description: '',
        email: '',
        username: ''
    } as ContactUsType)
    function handleChange(
        e:
            | React.ChangeEvent<HTMLInputElement>
            | React.ChangeEvent<HTMLTextAreaElement>
    ) {
        let data: ContactUsType = { ...contactUs.current }
        const name = e.target.name
        const value = e.target.value
        contactUs.current = { ...data, [name]: value }
        validateForm({ formValue: contactUs?.current })
    }

    function validateForm({ formValue }: Validate) {
        for (let key in formValue) {
            if (formValue.hasOwnProperty(key)) {
                const value = (formValue as any)[key].trim()
                if (!value) {
                    seterror((pre) => {
                        return { ...pre, [key]: 'This field is required' }
                    })
                } else {
                    if (key === 'email') {
                        let value = emailRegex.test((formValue as any)[key])
                        if (value) {
                            seterror((pre) => {
                                return { ...pre, [key]: '' }
                            })
                        } else {
                            seterror((pre) => {
                                return {
                                    ...pre,
                                    [key]: 'please enter valid email'
                                }
                            })
                        }
                    } else {
                        seterror((pre) => {
                            return { ...pre, [key]: '' }
                        })
                    }
                }
            }
        }
        if (Object.values(formValue).every((value) => value !== '')) {
            return true
        }
        return false
    }
    const contactUsApi = async (params: ContactUsType) => {
        try {
            setisLoading(true)
            const data = await fetch(
                `${process.env.NEXT_PUBLIC_API_MAIN_URL}/user-contact-us`,
                {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(params)
                }
            )
            const res = await data.json()
            contactUs.current = { description: '', email: '', username: '' }
            if (res?.meta?.status === 1) {
                setisSuccess('Thank you for submitting the form')
                setTimeout(() => {
                    setisSuccess(false)
                }, 3000)
            } else {
                setisSuccess('Something went Wrong')
                setTimeout(() => {
                    setisSuccess(false)
                }, 3000)
            }
            setisLoading(false)
        } catch (error) {
            setisSuccess('Something went Wrong')
            setTimeout(() => {
                setisSuccess(false)
            }, 3000)
            setisLoading(false)
        }
    }
    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()

        if (validateForm({ formValue: contactUs.current })) {
            contactUsApi(contactUs.current).then(() => {
                // setisSuccess(true)
            })
        }
    }


    return (
        <>
            <div className={styles.getinTouchsection}>
                <div className="container">
                    <div className={styles.getinTouchWrap}>
                        <div className={styles.getinTouchLeft}>
                            {/* <Slide
                                direction="up"
                                cascade
                                damping={0.5}
                                triggerOnce
                            >
                                <Navlink
                                    className={styles.footerLogo}
                                    title="Noble"
                                >
                                    <Image
                                        src={Logo}
                                        width={131}
                                        height={44}
                                        alt="Noble Logo"
                                    />
                                </Navlink>
                            </Slide> */}
                            <Slide
                                direction="up"
                                cascade
                                damping={0.5}
                                triggerOnce
                            >
                                <h2>Get in Touch</h2>
                            </Slide>
                            <Slide
                                direction="up"
                                cascade
                                damping={0.5}
                                triggerOnce
                            >
                                <p>
                                    Sometimes you need a little help from your friends.<br/>Or a noble support representative. Don’t worry… we are here for you!
                                </p>
                            </Slide>
                            <Slide
                                direction="up"
                                cascade
                                damping={0.5}
                                triggerOnce
                            >
                                <div className={styles.flexBox}>
                                <Image
                                        src={locationIcon}
                                        alt="Location icon"
                                    />
                                    <a href='https://maps.app.goo.gl/zUpHcF9Nz2D6oPfU7' target='_blank'>
                                    19 7th Ave Parktown North, Randburg, 2193 South Africa
                                    </a>
                                </div>
                            </Slide>
                            <Slide
                                direction="up"
                                cascade
                                damping={0.5}
                                triggerOnce
                            >
                                <div className={`${styles.flexBox} ${styles.mailBox}`}>
                                <Image
                                        src={MailIcon}
                                        alt="MailIcon"
                                    />
                                    <a href='mailto:support@thenobleapp.co.za'>
                                        support@thenobleapp.co.za
                                    </a>
                                </div>
                            </Slide>
                            <AppDownload />
                        </div>
                        <div className={styles.getinTouchRight}>
                            <form
                                noValidate
                                className={styles.contactFormWrap}
                                onSubmit={handleSubmit}
                            >
                                <div className={styles.row}>
                                    <div className={styles.colHalf}>
                                        <Slide
                                            direction="up"
                                            cascade
                                            damping={0.5}
                                            triggerOnce
                                        >
                                            <div className={styles.formGroup}>
                                                <label htmlFor="fullname">
                                                    Full Name
                                                </label>
                                                <input
                                                    value={
                                                        contactUs.current
                                                            .username
                                                    }
                                                    onChange={handleChange}
                                                    type="text"
                                                    name="username"
                                                    id="fullname"
                                                />
                                                {error?.username && (
                                                    <span className="errormsg">
                                                        {error?.username}
                                                    </span>
                                                )}
                                            </div>
                                        </Slide>
                                    </div>
                                    <div className={styles.colHalf}>
                                        <Slide
                                            direction="up"
                                            cascade
                                            damping={0.5}
                                            triggerOnce
                                        >
                                            <div className={styles.formGroup}>
                                                <label htmlFor="email">
                                                    Email Address
                                                </label>
                                                <input
                                                    value={
                                                        contactUs.current.email
                                                    }
                                                    onChange={handleChange}
                                                    type="email"
                                                    name="email"
                                                    id="email"
                                                />
                                                {error?.email && (
                                                    <span className="errormsg">
                                                        {error?.email}
                                                    </span>
                                                )}
                                            </div>
                                        </Slide>
                                    </div>
                                    <div className={styles.colFull}>
                                        <Slide
                                            direction="up"
                                            cascade
                                            damping={0.5}
                                            triggerOnce
                                        >
                                            <div className={styles.formGroup}>
                                                <label htmlFor="message">
                                                    Message{' '}
                                                </label>
                                                <textarea
                                                    value={
                                                        contactUs.current
                                                            .description
                                                    }
                                                    onChange={handleChange}
                                                    name="description"
                                                    id="message"
                                                    cols={50}
                                                    rows={4}
                                                ></textarea>
                                                {error?.description && (
                                                    <span className="errormsg">
                                                        {error?.description}
                                                    </span>
                                                )}
                                            </div>
                                        </Slide>
                                    </div>
                                    <div
                                        className={`${styles.colFull} ${
                                            styles.colSubmit
                                        } ${
                                            isLoading ? styles.loadingForm : ''
                                        }`}
                                    >
                                        <Slide
                                            direction="up"
                                            cascade
                                            damping={0.5}
                                            triggerOnce
                                        >
                                            <div className={styles.formGroup}>
                                                <button
                                                    disabled={isLoading}
                                                    type="submit"
                                                    title="Submit"
                                                    className={styles.submitBtn}
                                                >
                                                    Submit{' '}
                                                </button>
                                                <span
                                                    className={
                                                        styles.loaderWrap
                                                    }
                                                ></span>
                                            </div>
                                            {isSuccess && (
                                                <p className={styles.thanksMsg}>
                                                    {isSuccess}
                                                </p>
                                            )}
                                        </Slide>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Getintouch