import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay  } from 'swiper';

import Link from "next/link";
import {
    MDBCard,
    MDBCardBody,
    MDBCardTitle,
    MDBCardText,
    MDBCardHeader,
    MDBCardFooter,
    MDBBtn,
    MDBTypography,
    MDBContainer, MDBRow, MDBCol
} from 'mdb-react-ui-kit';
import {useRouter} from "next/router";
import AppContainer from "../appContainer";
import Image from "next/image";
import {Button, Center, Flex, Heading, Input, InputGroup, InputLeftAddon, InputRightAddon} from "@chakra-ui/react";
import { Step, Steps, useSteps } from "chakra-ui-steps"

SwiperCore.use([Autoplay]);




// Import Swiper styles

const Parallax = ({  quality }) => {
    return `https://image.freepik.com/free-photo/blur-hospital_1203-7957.jpg`
}



const dataServiceList = (
<>
    <div className="parallax-container">
        <h2 className={'center-align text-dark service-text dana font-weight-bold'}> کلینیک ها و بخش ها   </h2>
        <Image
            loader={Parallax}
            src="Parallax.png"
            className={'responsive-img shadow-5'}
            alt="Picture of the author"
            width={3000}
            height={1500}
        />
    </div>
    <MDBContainer style={{marginTop:10}}>
        <div>
            <MDBTypography style={{direction: 'rtl',borderRadius: '6px solid',borderRight: '6px  solid #1266f1',borderLeft: 'none'}} note noteColor='primary'>
                برای رزرو وقت روی هر کلینیک کلیک کنید
            </MDBTypography>
        </div>
        <MDBRow className='row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 g-4'>
            <MDBCol>
                <MDBCard className={'color-top-card'} alignment='center'  style={{ maxWidth: '22rem',height: '250px' }}>
                    <MDBCardHeader   className={'center d-flex justify-content-center'}>
                        <img width={'50'} src="https://image.flaticon.com/icons/png/512/2044/2044708.png" alt=""/>
                    </MDBCardHeader>
                    <MDBCardBody>
                        <MDBCardTitle className={'dana'}>  بخش گوارش </MDBCardTitle>
                        <MDBCardText className={'bk'}>داشتن بخش های تخصصی و فوق تخصصی </MDBCardText>
                    </MDBCardBody>
                </MDBCard>
            </MDBCol>

            <MDBCol>
                <MDBCard className={'color-top-card'} alignment='center'  style={{ maxWidth: '22rem',height: '250px' }}>
                    <MDBCardHeader   className={'center d-flex justify-content-center'}>
                        <img width={'50'} src="https://image.flaticon.com/icons/png/512/1839/1839377.png" alt=""/>
                    </MDBCardHeader>
                    <MDBCardBody>
                        <MDBCardTitle className={'dana'}>  بخش قلب و عروق </MDBCardTitle>
                        <MDBCardText className={'bk'}>داشتن بخش های تخصصی و فوق تخصصی </MDBCardText>
                    </MDBCardBody>
                </MDBCard>
            </MDBCol>
            <MDBCol>
                <MDBCard className={'color-top-card'} alignment='center'  style={{ maxWidth: '22rem',height: '250px' }}>
                    <MDBCardHeader   className={'center d-flex justify-content-center'}>
                        <img width={'50'} src="https://image.flaticon.com/icons/png/512/2847/2847982.png" alt=""/>
                    </MDBCardHeader>
                    <MDBCardBody>
                        <MDBCardTitle className={'dana'}>  بخش مغز و اعصاب </MDBCardTitle>
                        <MDBCardText className={'bk'}>داشتن بخش های تخصصی و فوق تخصصی </MDBCardText>
                    </MDBCardBody>
                </MDBCard>
            </MDBCol>
            <MDBCol>
                <MDBCard className={'color-top-card'} alignment='center'  style={{ maxWidth: '22rem',height: '250px' }}>
                    <MDBCardHeader   className={'center d-flex justify-content-center'}>
                        <img width={'50'} src="https://image.flaticon.com/icons/png/512/1610/1610185.png" alt=""/>
                    </MDBCardHeader>
                    <MDBCardBody>
                        <MDBCardTitle className={'dana'}>  بخش دندان پزشکی  </MDBCardTitle>
                        <MDBCardText className={'bk'}>داشتن بخش های تخصصی و فوق تخصصی </MDBCardText>
                    </MDBCardBody>
                </MDBCard>
            </MDBCol>
            <MDBCol>
                <MDBCard className={'color-top-card'} alignment='center'  style={{ cursor: 'pointer',maxWidth: '32rem',height: '250px' }}>
                    <MDBCardHeader   className={'center d-flex justify-content-center'}>
                        <img width={'50'} src="https://image.flaticon.com/icons/png/512/2660/2660065.png" alt=""/>
                    </MDBCardHeader>
                    <MDBCardBody>
                        <MDBCardTitle className={'dana'}>   بخش کلیه و مجاری ادارای </MDBCardTitle>
                        <MDBCardText className={'bk'}>داشتن بخش های تخصصی و فوق تخصصی </MDBCardText>
                    </MDBCardBody>
                </MDBCard>
            </MDBCol>
        </MDBRow>

    </MDBContainer>
    <br/>

</>

)
const steps = [
    { label: "Step 1", description: "Step 1 description" },
    { label: "Step 2", description: "Step 2 description" },
    { label: "Step 3", description: "Step 3 description" },
    { label: "Step 3", description: "Step 3 description" },
    { label: "Step 3", description: "Step 3 description" },
    { label: "Step 3", description: "Step 3 description" },
    { label: "Step 3", description: "Step 3 description" },
    { label: "Step 3", description: "Step 3 description" },
]
const Service = () => {
    const router = useRouter();
    const dataMipService = [
        {id: 1, title: 'بخش اورژانس', icon: './resource/icons/hospital-c.png', description: 'اورژانس'},
        {id: 2, title: 'درمانگاه', icon: './resource/icons/hospital.png', description: 'درمانگاه تخصصی'},
        {id: 3, title: 'بخش بستری داخلی', icon: './resource/icons/hospital-bed.png', description: 'بستری داخلی'},
        {id: 4, title: 'بخش اسکوپی', icon: './resource/icons/scope.png', description: 'اسکوپی'},
        {id: 5, title: 'بخش پوست', icon: './resource/icons/dermis.png', description: 'زیبایی و لیزر'},
        {id: 6, title: 'بخش جراحی', icon: './resource/icons/surgery.png', description: 'تخصصی و زیبایی'},
        {id: 7, title: 'بخش اتاق عمل', icon: './resource/icons/operating-room.png', description: 'اتاق عمل'},
        {id: 8, title: 'بخش  مراقبت های ویژه ICU', icon: './resource/icons/ICU.png', description: 'ICU'},
        {id: 9, title: 'بخش  مراقبت های ویژه قلب CCU', icon: './resource/icons/CCU.png', description: 'CCU'},
        {id: 10, title: 'بخش  مراقبت های ویژه نوزدان NICU', icon: './resource/icons/NICU.png', description: 'NICU'},
        {id: 11, title: 'بخش  زایمان LDR', icon: './resource/icons/baby.png', description: 'LDR'},
        {id: 12, title: 'بخش  تصویر برداری', icon: './resource/icons/x-rays.png', description: 'سونوگرافی و ...'},
        {id: 13, title: 'بخش آزمایشگاه', icon: './resource/icons/test-tubes.png', description: 'تخصصی ، سلامت سنجی'},
        {id: 14, title: 'بخش فیزیوتراپی', icon: './resource/icons/spinal-cord.png', description: 'تست قلب و ...'},
    ]
    const { nextStep, prevStep, reset, activeStep } = useSteps({
        initialStep: 0,
    })
    return (
        <>
            {router.pathname === '/' ? (
                <div className={'mt-5'}>
                    <MDBContainer>
                        <h5 style={{ marginTop: '2rem' }} className={'right-align font-weight-bold'}>کلینیک و بخش ها    </h5>
                        <hr />
                        <br />
                        <Swiper
                            spaceBetween={20}
                            navigation={true}
                            slidesPerView={4}
                            watchSlidesProgress
                            // onSlideChange={() => console.log('slide change')}
                            // onSwiper={(swiper) => console.log(swiper)}
                            autoplay={{
                                "delay": 2500,
                                "disableOnInteraction": false
                            }}
                            breakpoints={{
                                "640": {
                                    "slidesPerView": 2,
                                    "spaceBetween": 20
                                },
                                "360": {
                                    "slidesPerView": 1,
                                    "spaceBetween": 20
                                },
                                "320": {
                                    "slidesPerView": 1,
                                    "spaceBetween": 20
                                },
                                "596": {
                                    width: 1080,
                                    "slidesPerView": 2,
                                    "spaceBetween": 20
                                },
                                "526": {
                                    "slidesPerView": 1,
                                    "spaceBetween": 2
                                },

                                "996": {
                                    "slidesPerView": 2,
                                    "spaceBetween": 40
                                },
                                "860": {
                                    "slidesPerView": 2,
                                    "spaceBetween": 40
                                },
                                "768":{
                                    "slidesPerView": 3,
                                    "spaceBetween": 40
                                },
                                "972": {
                                    "slidesPerView": 3,
                                    "spaceBetween": 40
                                },
                                "1024": {
                                    "slidesPerView": 5,
                                    "spaceBetween": 50
                                }
                            }}
                        >
                            {dataMipService.map((item, index) => {
                                return (
                                    <SwiperSlide key={index}>
                                        <Link href={'components/service'} as={'/Service'}>
                                            <MDBCard className={'color-top-card '} alignment='center'  style={{ maxWidth: '22rem',height: '250px' }}>
                                                <MDBCardHeader   className={'center d-flex justify-content-center'}>
                                                    <img width={'50'} src={item.icon} alt=""/>
                                                </MDBCardHeader>
                                                <MDBCardBody className={'d-flex flex-column justify-content-between'}>
                                                    <MDBCardTitle className={'dana'}> {item.title} </MDBCardTitle>
                                                    <MDBCardText className={'bk RTL'}>{item.description}</MDBCardText>
                                                </MDBCardBody>
                                            </MDBCard>
                                        </Link>
                                        <br />
                                        <br />
                                    </SwiperSlide>
                                )
                            })}
                            <SwiperSlide>
                                <MDBCard className={'color-top-card'} alignment='center'  style={{ cursor: 'pointer', maxWidth: '22rem',height: '250px' }}>
                                    <MDBCardBody style={{display: 'flex',alignItems:'center',justifyContent: 'center'}}>
                                        <Link href={'components/service'} as={'/Service'}>
                                            <MDBCardText className={'bk'}><h1 className={'RTL dana'}>بیشتر ...</h1> </MDBCardText>
                                        </Link>
                                    </MDBCardBody>
                                </MDBCard>
                                <br />
                                <br />
                            </SwiperSlide>
                        </Swiper>
                    </MDBContainer>
                </div>
            ): (
                <AppContainer title={'کلینیک ها و بخش ها '}>
                    <div className="parallax-container">
                        <h2 className={'center-align text-dark service-text dana font-weight-bold'}> کلینیک ها و بخش ها   </h2>
                        <Image
                            loader={Parallax}
                            src="Parallax.png"
                            className={'responsive-img shadow-5'}
                            alt="Picture of the author"
                            width={3000}
                            height={1500}
                        />
                    </div>
                    <MDBContainer style={{marginTop:10}}>
                        <div>
                            <MDBTypography style={{direction: 'rtl',borderRadius: '6px solid',borderRight: '6px  solid #1266f1',borderLeft: 'none'}} note noteColor='primary'>
                                برای رزرو وقت روی هر کلینیک کلیک کنید
                            </MDBTypography>
                        </div>
                        <MDBRow className='row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 g-4'>
                            {dataMipService.map((item, index) => {
                                return (
                                    <MDBCol>
                                        <MDBCard key={index} className={'color-top-card '} alignment='center'  style={{ maxWidth: '22rem',height: '250px' }}>
                                            <MDBCardHeader   className={'center d-flex justify-content-center'}>
                                                <img width={'50'} src={item.icon} alt=""/>
                                            </MDBCardHeader>
                                            <MDBCardBody className={'d-flex flex-column justify-content-between'}>
                                                <MDBCardTitle className={'dana'}> {item.title} </MDBCardTitle>
                                                <MDBCardText className={'bk RTL'}>{item.description}</MDBCardText>
                                            </MDBCardBody>
                                        </MDBCard>
                                    </MDBCol>
                                )
                            })}
                        </MDBRow>

                    </MDBContainer>
                    <br/>
                </AppContainer>

            )}
        </>
    );
};

export default Service;