import './CalculatorComponent.css'
import { useEffect } from "react";
import { calcSlice } from "../../store/reducers/calcSlice";
import { useSelector, useDispatch } from "react-redux";

import { InputSelect } from "./components/InputSelect/InputSelect";
import { InputNumber } from "./components/InputNumber/InputNumber";
import { AveragePriceApartment } from "./components/AveragePriceApartment/AveragePriceApartment";
import { AverageSquareApartment } from "./components/AverageSquareApartment/AverageSquareApartment";
import { ConsultationOffice } from "./components/ConsultationOffice/ConsultationOffice";
import { ConsultationReserv } from "./components/ConsultationReserv/ConsultationReserv";
import { Sales } from "./components/Sales/Sales";
import { ResultBlock } from "./components/ResultBlock/ResultBlock";

const INITIAL_REGION = "e5b7edfb-17ec-475f-8631-bc796ad19909";

export const CalculatorComponent = ({ }) => {
    const dispatch = useDispatch();
    const { handleSelectRegion, handleOptions, handleValue } = calcSlice.actions;
    const { selectedRegion, filteredList, squareRC } = useSelector(
        (state) => state.calcReducer
    );

    useEffect(() => {
        dispatch(handleSelectRegion(INITIAL_REGION));
        dispatch(handleOptions());
    }, []);

    const handleSelect = (element) => {
        dispatch(handleSelectRegion(element.id));
    };

    return (
        <div className="calculator-layout">
            <div className="input-container-main">
                <InputSelect
                    option={filteredList}
                    handleSelect={handleSelect}
                    selectedValue={selectedRegion}
                ></InputSelect>
                <InputNumber handleState={handleValue} number={squareRC}></InputNumber>
                <AverageSquareApartment></AverageSquareApartment>
                <AveragePriceApartment></AveragePriceApartment>
            </div>
            <div className="input-container-second">
                <ConsultationOffice></ConsultationOffice>
                <ConsultationReserv></ConsultationReserv>
                <Sales></Sales>
                <ResultBlock></ResultBlock>
            </div>

        </div>
    );
};