'use client'
import React, { useState } from 'react'
import { Modal } from 'react-bootstrap'
import { styled } from 'styled-components'
import { Colors } from '../common/variable'
import { device } from '../common/Devices'

const ModalBoday = styled.div`
    position: relative;
    max-width: 600px;
    margin: auto;
    background: ${Colors.white};
    box-shadow: 0px 20px 52px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    padding: 60px;
    @media ${device.mobile} {
        padding: 30px;
    }
    @media ${device.mobileS} {
        padding: 30px 16px 16px;
    }
    .modal-header {
        padding: 0;
        border: none;
        .btn-close {
            position: absolute;
            top: 20px;
            right: 20px;
            margin: 0;
            padding: 0;
            opacity: 1;
            box-shadow: none;
        }
    }
    .modal-body {
        padding: 0;
    }
    .modal-btn {
        min-width: 180px;
        @media ${device.mobileS} {
            min-width: 100px;
        }
    }
    &.form-modal {
        max-width: 592px;
        text-align: center;
        &.book-call-modal {
            max-width: 928px;
            .book-btn-group {
                grid-gap: 26px;
                flex-wrap: wrap;
                @media ${device.mobile} {
                    grid-gap: 10px;
                }
            }
        }
        h4 {
            margin-bottom: 30px;
            text-align: start;
            @media ${device.mobile} {
                margin-bottom: 20px;
            }
        }
    }
    &.success-modal {
        max-width: 592px;
        text-align: center;
        padding: 40px 60px;
        p{
            text-align: center;
        }
        @media ${device.mobile} {
            padding: 30px;
        }
        @media ${device.mobileS} {
            padding: 30px 16px 16px;
        }
        svg {
            max-width: 236px;
            @media ${device.mobile} {
                max-width: 150px;
                height: 150px;
            }
            @media ${device.mobileS} {
                max-width: 100px;
                height: 100px;
            }
        }
        h2 {
            margin: 30px 0 20px;
            @media ${device.mobile} {
                margin: 16px 0;
            }
        }
        p {
            margin-bottom: 44px;
            @media ${device.mobile} {
                margin-bottom: 20px;
            }
        }
    }
`

const SiteModal = ({
    succesModel: SuccesModel,
    MainModel,
    toggle,
    setToggle,
    isBook,
    formValue
}) => {
    const [success, setSuccess] = useState(false)
    return (
        <>
            <Modal
                onHide={() => {
                    setToggle(false)
                }}
                show={toggle}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <ModalBoday
                    className={`form-modal ${isBook ? 'book-call-modal' : ''}`}
                >
                    <Modal.Header closeButton></Modal.Header>
                    <Modal.Body>
                        {
                            <MainModel
                                isBook={isBook}
                                setToggle={setToggle}
                                closeModel={() => {
                                    setSuccess(true)
                                    setToggle(false)
                                }}
                                closeFormModal={() => {
                                    setToggle(false)
                                }}
                                formValue={formValue}
                            />
                        }
                    </Modal.Body>
                </ModalBoday>
            </Modal>

            <Modal
                show={success}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
                onHide={() => {
                    setSuccess(false)
                }}
            >
                <ModalBoday className="success-modal">
                    <Modal.Body>
                        <SuccesModel setSuccess={setSuccess} />
                    </Modal.Body>
                </ModalBoday>
            </Modal>
        </>
    )
}

export default SiteModal