//@ts-nocheck

import React from 'react';
import { SliderContainer, SliderDotContainer, Arrow } from './slider.style';
import { SliderItem } from './item/sliderItem.component';
import About from '../../assets/ONasHero.png';
import Finansowanie from '../../assets/FinansowanieHero.png';
import { Dot } from './dots/dot.component';
import ArrowLeft from '../../assets/StrzalkaBialaLewo.png';
import ArrowRight from '../../assets/StrzalkaBialaPrawo.png';
import Ubezpieczenia from '../../assets/Ubezpieczenia.png';
import Opytmalizacja from '../../assets/Optymalizacja.png';
import Inwestycje from '../../assets/Inwestycje.png';
import Wsparcie from '../../assets/Wsparcie.png';
import Odnawialne from '../../assets/Odnawialne.png';
import { PageComponent } from './pages/page.component';

interface State {
    list: [
        {
            img: string;
            alt: string;
            quote: string;
            index: number;
            title: string;
            subtitle: string;
            special: boolean;
            opacity: number;
        }
    ];
}

export class Slider extends React.Component<{}, State> {
    constructor() {
        super({});

        this.state = {
            //@ts-ignore
            list: [
                {
                    img: About,
                    alt:
                        'www.financeroom.pl - Zdjęcie wyróźniające sekcje o nas',
                    quote:
                        '„Jeżeli ludzie w kraju rozumieliby naszą bankowość i system monetarny, wierzę, że przed jutrzejszym rankiem wybuchłaby rewolucja.” – Henry Ford',
                    index: 1,
                    title: '',
                    subtitle: 'więcej o nas',
                    special: true,
                    opacity: 1,
                },
                {
                    img: Finansowanie,
                    alt:
                        'www.financeroom.pl - Zdjęcie wyróźniające sekcje finansowanie',
                    quote:
                        'Poznaj produkty finansowe dla klientów indywidualnych jak i dla firm.',
                    index: 0,
                    title: 'Ubezpieczenia',
                    subtitle: 'więcej o ubezpieczenia',
                    special: false,
                    opacity: 0,
                },
                {
                    img: Ubezpieczenia,
                    alt:
                        'www.financeroom.pl - Zdjęcie wyróźniające sekcje ubezpieczenia',
                    quote:
                        'Poznaj produkty ubezpieczeniowe dla klientów indywidualnych jak i dla firm.',
                    index: 0,
                    title: 'Finansowanie',
                    subtitle: 'więcej o finansowianiu',
                    special: false,
                    opacity: 0,
                },
                {
                    img: Opytmalizacja,
                    alt:
                        'www.financeroom.pl - Zdjęcie wyróźniające sekcje optymalizacje podatkową i doradctwo finansowe',
                    quote:
                        'Optymalizacja podatkowa i doradztwo finansowe? Chętnie wspomożemy Państwa naszą profesjonalną wiedzą.',
                    index: 0,
                    title: 'Optymalizacja podatkowa i doradctwo finansowe',
                    subtitle: 'więcej o optymalizacji',
                    special: false,
                    opacity: 0,
                },
                {
                    img: Inwestycje,
                    alt:
                        'www.financeroom.pl - Zdjęcie wyróźniające sekcje inwestycje',
                    quote:
                        'Poznaj produkty inwestycyjne dla klientów indywidualnych jak i dla firm.',
                    index: 0,
                    title: 'Inwestycje',
                    subtitle: 'więcej o inwestycje',
                    special: false,
                    opacity: 0,
                },
                {
                    img: Wsparcie,
                    alt:
                        'www.financeroom.pl - Zdjęcie wyróźniające sekcje wsparcie',
                    quote:
                        'Poznaj produkty wsparcia dla klientów indywidualnych jak i dla firm.',
                    index: 0,
                    title: 'Wsparcie',
                    subtitle: 'więcej o wsparciu',
                    special: false,
                    opacity: 0,
                },
                {
                    img: Odnawialne,
                    alt:
                        'www.financeroom.pl - Zdjęcie wyróźniające sekcje Odnawialne źródła energii',
                    quote:
                        'Poznaj produkty odnawialnych żródł energi dla klientów indywidualnych jak i dla firm.',
                    index: 0,
                    title: 'Odnawialne źródła energii',
                    subtitle: 'więcej o odnawialnych źródłach energii',
                    special: false,
                    opacity: 0,
                },
            ],
        };
    }

    _onLeftClick = () => {
        const newArray = [...this.state.list];
        const lastItem = newArray.pop();
        console.log('last item', lastItem);
        newArray.unshift(lastItem);
        console.log('newArry', newArray);

        this.setState((state) => {
            // const list = newArray;
            // return {
            //     list,
            // };
        });
        // this.setState({ list: newArray });

        console.log('state', this.state);
    };

    _onRigthClick = () => {
        console.log('rigth');
    };

    _slide = () => {};

    render() {
        return (
            <div>
                <SliderContainer>
                    {this.state.list.map((value, key) => {
                        return (
                            <SliderItem
                                key={key}
                                img={value.img}
                                alt={value.alt}
                                quote={value.quote}
                                index={value.index}
                                title={value.title}
                                subtitle={value.subtitle}
                                special={value.special}
                                opacity={value.opacity}
                            />
                        );
                    })}
                    <SliderDotContainer>
                        <Arrow onClick={this._onLeftClick}>
                            <img
                                src={ArrowLeft}
                                alt='financeroom.pl - slider finance'
                            />
                        </Arrow>
                        {this.state.list.map((value, key) => {
                            return <Dot key={key} />;
                        })}
                        <Arrow onClick={this._onRigthClick}>
                            <img
                                src={ArrowRight}
                                alt='financeroom.pl - slider finance'
                            />
                        </Arrow>
                    </SliderDotContainer>
                </SliderContainer>
                <PageComponent></PageComponent>
            </div>
        );
    }
}