import React, { useState } from "react";
import { Swiper, SwiperSlide } from 'swiper/react';
import { Scrollbar, Navigation } from 'swiper/core';
import ISVGIcon from '../../components/UI/Icon/SVGIcon';
import { Formik, Field, Form } from 'formik';

import styled from 'styled-components';
import 'swiper/css';
import 'swiper/css/scrollbar';
import 'swiper/css/navigation';

// swiper customization
import './swiper.css';


const SVGIcon = styled(ISVGIcon)`
    margin-left:0;
`;

const Title = styled.p`
    font-size: 20pt;
    font-weight: 600;
    text-align: center;
    margin: 32px 0;
    text-shadow: 0 2px 1px #00000020;
`;

const HighlightWord = styled.span`
    color: cornflowerblue;
`;

const SwiperImage = styled.div`
    background: url(${props => props.src ? props.src : ''});
    background-repeat: no-repeat;
    background-size: cover;

    width: 800px;
    height: 400px;
`;

const Filters = styled.div`
    background: url(/images/filter.png);
    height: 300px;
    width: 1150px;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 2px 12px #00000060;
    padding: 30px;
    text-shadow: 0 2px 16px #ffffffa0;
`;

const PeriodFilter = styled.div`
    display: block;

    margin: 12px 0;
`;

const PeriodButton = styled.button`
    width: fit-content;
    height: 27px;
    display: inline-block;
    margin-right: 16px;

    border-radius: 14px;
    padding: 0 16px;
    box-shadow: 0 2px 16px #ffffff30;

    color: ${props => props.active ? 'green' : 'black'};
    box-sizing: border-box;
    ${props => props.active ? 'font-weight: 600;' : ''}
`;

const FilterText = styled.h1`
    font-size: 16pt;
    color: #f0f4f0;
    user-select: none;

    padding-bottom: 6px;
    border-bottom: 1px solid #f0f2f030;
`;

const ClearButton = styled(PeriodButton)`
    float: right;
    color: darkred;
    margin-right: 0;
`;

const SearchBarFilter = styled.div`
    background: #f2f3f2;
    border-radius: 12px;
    width: 100%;
    height: 56px;
    margin-top: 12px;
    font-weight: 400
`;

const SubmitBtn = styled.button`
    background: darkblue;
`;

const FiltersForm = () => {

    const def_form = {
        per_day: false,
        per_month: false
    };

    const submitted = (a) => {
        console.log(a);
    }

    return (
        <Formik
            initialValues={def_form}
            onSubmit={async (values) => {
                console.log(values);
            }}
            >
            <Form>
                <Filters>
                    <FilterText>Фильтры</FilterText>
                    
                    <PeriodFilter>
                        <PeriodButton>
                            <SVGIcon src='/images/icons/calendar-day.svg' width='14' height='14' />
                            Посуточно
                        </PeriodButton>
                        <PeriodButton>
                            <SVGIcon src='/images/icons/calendar.svg' width='14' height='14' />
                            Ежемесячно
                        </PeriodButton>
                        <ClearButton>
                            <SVGIcon src='/images/icons/eraser-fill.svg' width='14' height='14' />
                            Сбросить
                        </ClearButton>
                    </PeriodFilter>

                    <SearchBarFilter>
                        asbvccxcz
                    </SearchBarFilter>

                    <button type='submit'>
                        Показать варианты
                    </button>
                </Filters>
            </Form>
        </Formik>
    );
}

export default function IndexPage(props) {    
    return (
        <>
            <div style={{ height: 30 }} />
            <Swiper
                spaceBetween={4}
                style={{ width: 800, height: 250, borderRadius: 20 }}

                modules={[ Scrollbar, Navigation ]}
                scrollbar={{ enabled: true, draggable: true }}
                navigation={{ enabled: true }}
                loop={ true }
                autoplay={{ delay: 7 }}
                >
                <SwiperSlide>
                    <SwiperImage src='/images/house-s.jpg' />
                </SwiperSlide>
                <SwiperSlide>
                    <SwiperImage src='/images/house-s-2.jpg' />
                </SwiperSlide>
            </Swiper>

            <Title>
                Выбор квартиры во
                <HighlightWord> Владивостоке</HighlightWord>
            </Title>

            <FiltersForm />

        </>
    );
}