'use client'
import YogaImageComponent from "@/components/yoga.image.component";
import {YogaContactUs_Plain} from "@/types/generated-strapi-interfaces/api/yoga-contact-us";
import {RefObject, startTransition, useActionState, useEffect, useRef} from "react";
import {ContactFormState, sendContactUsMail} from "@/actions/contactus-actions";
import clsx from "clsx";

export interface Props {
    contactUs: YogaContactUs_Plain
}

const ContactUsComponent = ({
                                contactUs: {
                                    header,
                                    firstName,
                                    lastName,
                                    phone,
                                    title,
                                    message,
                                    email,
                                    buttonText
                                }
                            }: Props) => {
    const initialState = () => {
        return {
            firstname: {value: ''},
            lastname: {value: ''},
            comment: {value: ''},
            email: {value: ''},
            phone: {value: ''}
        } as ContactFormState;
    }
    const [state, formAction] = useActionState(sendContactUsMail, initialState());
    const ref: RefObject<HTMLFormElement|null> = useRef(null)

    useEffect(() => {
        if ( state.formState == 'success'){
            ref.current?.reset()
        }
    }, [state]);
    return (
        <section className="get_in_touch_section">
            <div className="container">
                <div className="row" data-aos="fade-up">
                    <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <div className="get_in_touch_content">
                            <h5>{title}</h5>
                            <h2>{header}</h2>
                            <form
                                ref={ref}
                                onSubmit={(e) => {
                                    e.preventDefault();
                                    startTransition(() => formAction(new FormData(e.currentTarget)));
                                }}
                            >
                                <div className="row">
                                    <div className="col-lg-6 col-md-6 col-sm-6">
                                        <div className="form-group mb-0">
                                            <input type="text" name="firstname" id="firstname"
                                                   className={clsx("form-control", {"mb-0": state.firstname.error})}
                                                   placeholder={firstName}
                                            />
                                        </div>
                                        {state.firstname.error &&
                                            <div className="text-danger mb-3">{state.firstname.error}</div>}
                                    </div>
                                    <div className="col-lg-6 col-md-6 col-sm-6">
                                        <div className="form-group mb-0">
                                            <input type="text" name="lastname" id="lname"
                                                   className={clsx("form-control", "form_style", {"mb-0": state.lastname.error})}
                                                   placeholder={lastName}/>
                                        </div>
                                        {state.lastname.error &&
                                            <div className="text-danger mb-3">{state.lastname.error}</div>}

                                    </div>
                                    <div className="col-lg-6 col-md-6 col-sm-6">
                                        <div className="form-group mb-0">
                                            <input type="tel" name="phone" id="phonenum"
                                                   className={clsx("form-control", {"mb-0": state.phone.error})}

                                                   placeholder={phone}/>
                                        </div>
                                        {state.phone.error &&
                                            <div className="text-danger mb-3">{state.phone.error}</div>}

                                    </div>
                                    <div className="col-lg-6 col-md-6 col-sm-6">
                                        <div className="form-group mb-0">
                                            <input type="email" name="email" id="emailaddrs"
                                                   className={clsx("form-control", "form_style", {"mb-0": state.email.error})}
                                                   placeholder={email}/>
                                        </div>
                                        {state.email.error &&
                                            <div className="text-danger mb-3">{state.email.error}</div>}

                                    </div>
                                </div>
                                <div className="row">
                                    <div className="col-lg-12">
                                        <div className=" form-group mb-0">
                                            <textarea rows={3} name="comment" id="msg"
                                                      className={clsx("form-control", {"mb-0": state.comment.error})}

                                                      placeholder={message}></textarea>
                                        </div>
                                        {state.comment.error &&
                                            <div className="text-danger mb-3">{state.comment.error}</div>}

                                    </div>
                                </div>
                                <div className="btn_wrapper">
                                    <button type="submit" name="get_started" id="started">{buttonText}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div className="col-lg-3 col-md-3 col-sm-2 col-xs-12 d-md-block d-none"></div>
                    <div className="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                        <div className="get_in_touch_video position-relative">
                            <a className="popup-vimeo"
                               href="https://previews.customer.envatousercontent.com/6720474d-ddc3-4b86-acf1-8d093cb37b6d/watermarked_preview/watermarked_preview.mp4">
                                <figure className="video_img mb-0">
                                    <YogaImageComponent className="thumb img-fluid" style={{"cursor": "pointer"}}
                                                        src="/assets/images/get_in_touch_video_icon.png" alt=""/>
                                </figure>
                            </a>
                        </div>
                    </div>
                </div>
                <figure className="get_in_touch_shape left_shape mb-0">
                    <YogaImageComponent src="/assets/images/get_in_touch_shape.png" alt="" className="img-fluid"/>
                </figure>
            </div>
        </section>
    );
}

export default ContactUsComponent;