'use client';

import React, { useCallback, useState } from 'react';
import { List, Switch, Slider } from 'antd';
import styled from 'styled-components';
import { FilterType, INITIAL_FILTER } from '../../constants/experts';
import { Filter } from '../../types/experts';

const CustomSwitch = styled(Switch)`
    height: 24px !important;
    background: #F8F8F7 !important;
    
    .ant-switch-handle {
        height: 24px !important;
        width: 24px !important;
        top: 0 !important;
        
        &::before {
            box-shadow: none !important;
            background: #C4DFE6 !important;
            border-radius: 50% !important;
        }
    }
    
    &.ant-switch-checked {
        background: #2c7873 !important;
    }
`;

const WrapSlider = styled.div`
    width: 100%;
    position: relative;
    margin: 8px 0 16px -5px;
`;

const CustomSlider = styled(Slider)`
    padding-block: 7px !important;
    height: 16px !important;

    .ant-slider-rail {
        background-color: #E5E5E5 !important;
    }
    
    .ant-slider-track {
        background-color: #66A5AD !important;        
    }
    
    .ant-slider-handle {
        width: 16px !important;
        height: 16px !important;
        
        &::before {
            width: 16px !important;
            height: 16px !important;
            inset-inline-start: 0 !important;
            inset-block-start: 0 !important;
        }
        
        &::after {
            width: 16px !important;
            height: 16px !important;
            background-color: #66A5AD !important;
            inset-inline-start: 0 !important;
            inset-block-start: 0 !important;
            box-shadow: none !important;
        }
        
        &:focus, &:hover {
            &::after {
                box-shadow: 0 0 0 10px rgba(102, 165, 173, .2) !important;
            }
        }
    }
`;

const dataCoaching = [
    {
        key: FilterType.WorkLifeBalance,
        title: 'Work-life Balance'
    },
    {
        key: FilterType.StrategicSession,
        title: 'Strategic Session'
    },
    {
        key: FilterType.PersonalGrowth,
        title: 'Personal Growth'
    },
    {
        key: FilterType.PersonalGrowth,
        title: 'Career Planning'
    },
    {
        key: FilterType.ExecutiveCoaching,
        title: 'Executive Coaching'
    }
];

const dataMentoring = [
    {
        key: FilterType.CareerDevelopment,
        title: 'Career Development'
    },
    {
        key: FilterType.Networking,
        title: 'Networking'
    }
];

const dataConsultation = [
    {
        key: FilterType.BusinessModelReview,
        title: 'Business Model Review'
    }
];

export const ExpertsFilter = () => {
    const [filter, setFilter] = useState<Filter>(INITIAL_FILTER);

    const onChangeFilter = useCallback((key: string, value: any) => {
        setFilter({
            ...filter,
            [key]: value
        })
    }, [filter]);

    const getList = useCallback((data: any[]) => (
        <div className="b-filter__inner">
            <List
                itemLayout="vertical"
                size="small"
                dataSource={data}
                split={false}
                style={{ width: '100%' }}
                renderItem={({ key, title }) => (
                    <List.Item key={key} style={{ padding: 0 }}>
                        <div className="b-filter__item">
                            <div className="b-filter__title">{title}</div>
                            <CustomSwitch
                                defaultChecked={filter[key]}
                                onChange={(checked) => onChangeFilter(key, checked)}
                            />
                        </div>
                    </List.Item>
                )}
            />
        </div>
    ), [filter]);

    return (
        <div className="b-filter">
            <h3 className="title-h3">Coaching</h3>
            {getList(dataCoaching)}
            <h3 className="title-h3">Mentoring</h3>
            {getList(dataMentoring)}
            <h3 className="title-h3">Business-consultation</h3>
            {getList(dataConsultation)}
            <h3 className="title-h3">Price from 45€ to 170€</h3>
            <WrapSlider>
                <CustomSlider
                    range
                    step={1}
                    defaultValue={INITIAL_FILTER[FilterType.Price]}
                    min={45}
                    max={170}
                    onChange={(val) => onChangeFilter(FilterType.Price, val)}
                />
            </WrapSlider>
            <h3 className="title-h3">Duration from 45m to 120m</h3>
            <WrapSlider>
                <CustomSlider
                    range
                    step={1}
                    defaultValue={INITIAL_FILTER[FilterType.Duration]}
                    min={45}
                    max={120}
                    onChange={(val) => onChangeFilter(FilterType.Duration, val)}
                />
            </WrapSlider>
            <button className="btn-apply">Apply</button>
        </div>
    );
};
