import React, {useEffect, useState} from 'react';
import {Alert, Platform} from 'react-native';
import {connect} from 'react-redux';
import {getTransaction} from '../../apis/Functions/users';
import {getImagesHome} from '../../apis/Functions/General';
import {getPriceTable} from '../../apis/Functions/Home';
import I18n from '../../helper/i18/i18n';

import HomeView from './HomeView';
import {getListCategoryProduct} from '../../apis/Functions/Transaction';
import {hideLoading, showLoading} from '../../actions/loadingAction';
import _ from 'lodash';
import {showAlert, TYPE} from '../../components/DropdownAlert/index';
import VersionChecker from '../VersionChecker';

const Home = (props) => {
    const [data, setData] = useState({total_deposit: 0, total_withdraw: 0});
    const [dataPrice, setDataPrice] = useState([]);
    const [dataPriceFilter, setDataPriceFilter] = useState([]);
    const [listImage, setListImage] = useState([]);
    const [filters, setFilters] = useState([]);
    const [filterId, setFilterId] = useState(-1);
    const [isSortName, setIsSortName] = useState(null);
    const [isSortPercent, setIsSortPercent] = useState(null);
    const [isSortPriceOpenClose, setIsSortPriceOpenClose] = useState(null);
    const [isSortPriceHighLow, setIsSortPriceHighLow] = useState(null);
    const SORT_TYPE = {
        DESC: 'DESC',
        ASC: 'ASC',
    };
    useEffect(() => {
        getData();
        initSocket();
    }, []);
    useEffect(() => {
        const newList =
            filterId == -1
                ? [...dataPrice]
                : _.filter([...dataPrice], (item) => item.category_id == filterId);
        setDataPriceFilter(newList);
    }, [dataPrice]);

    const initSocket = () => {
        let io = require('socket.io-client');
        let socket = io.connect('http://222.252.22.174:8087', {
            transports: ['websocket'],
            jsonp: false,
            reconnect: true,
        });
        socket.on('response-update-price', (message) => {
            receivedMessage(message);
        });
    };

    const receivedMessage = (message) => {
        setDataPrice(message);
    };

    const getData = async () => {
        props.showLoading();
        const res = await getTransaction({});
        if (res.data.code == 200 && res.data.data) {
            setData(res.data.data);
        } else {
            showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
        }

        const res1 = await getImagesHome({});
        if (res1.data.code == 200 && res1.data.data) {
            setListImage(res1.data.data);
        } else {
            showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
        }
        const resCategoryProduct = await getListCategoryProduct({
            keyword: '',
            platform: Platform.OS,
            page_size: 20,
            page_index: 1,
            type: 'PRODUCT',
        });
        console.log(resCategoryProduct);

        if ((resCategoryProduct.data.code = 200 && resCategoryProduct.data.data)) {
            let data = [];
            data.push({id: -1, name: 'All'});
            setFilters(data.concat([...resCategoryProduct.data.data]));
        } else {
            showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
        }
        const resPriceHome = await getPriceTable({});
        if (resPriceHome.data.code == 200 && resPriceHome.data.data) {
            setDataPrice(resPriceHome.data.data);
            setDataPriceFilter(resPriceHome.data.data);
        } else {
            showAlert(TYPE.ERROR, I18n.t('Notification'), I18n.t('Can_not_get_data'));
        }
        props.hideLoading();

        console.log('filterId', filterId);
        console.log('filters', filters);
    };

    const changeFilter = (id) => {
        setFilterId(id);
        const newList =
            id == -1
                ? [...dataPrice]
                : _.filter([...dataPrice], (item) => item.category_id == id);
        setDataPriceFilter(newList);
        console.log(id, newList);
    };

    const onSortByName = () => {
        let type = 'ASC';
        if (!isSortName || isSortName == SORT_TYPE.ASC) {
            type = SORT_TYPE.DESC;
        }
        let newData =
            type == SORT_TYPE.ASC
                ? [...dataPriceFilter].sort((a, b) => (a.name > b.name ? 1 : -1))
                : [...dataPriceFilter].sort((a, b) => (a.name < b.name ? 1 : -1));
        setDataPriceFilter(newData);
        setIsSortPriceOpenClose(null);
        setIsSortName(type);
        setIsSortPercent(null);
        setIsSortPriceHighLow(null);
    };
    const onSortByPercent = () => {
        let type = 'ASC';
        if (!isSortPercent || isSortPercent == SORT_TYPE.ASC) {
            type = SORT_TYPE.DESC;
        }
        let newData =
            type == SORT_TYPE.ASC
                ? [...dataPriceFilter].sort((a, b) => (a.change > b.change ? 1 : -1))
                : [...dataPriceFilter].sort((a, b) => (a.change < b.change ? 1 : -1));
        setDataPriceFilter(newData);
        setIsSortPriceOpenClose(null);
        setIsSortName(null);
        setIsSortPercent(type);
        setIsSortPriceHighLow(null);
    };
    const onSortByPriceOpenClose = () => {
        let type = 'ASC';
        if (!isSortPriceOpenClose || isSortPriceOpenClose == SORT_TYPE.ASC) {
            type = SORT_TYPE.DESC;
        }
        let newData =
            type == SORT_TYPE.ASC
                ? [...dataPriceFilter].sort((a, b) =>
                    a.open_price > b.open_price ? 1 : -1,
                )
                : [...dataPriceFilter].sort((a, b) =>
                    a.open_price < b.open_price ? 1 : -1,
                );
        setDataPriceFilter(newData);
        setIsSortPriceOpenClose(type);
        setIsSortName(null);
        setIsSortPercent(null);
        setIsSortPriceHighLow(null);
    };
    const onSortByPriceHighLow = () => {
        let type = 'ASC';
        if (!isSortPriceHighLow || isSortPriceHighLow == SORT_TYPE.ASC) {
            type = SORT_TYPE.DESC;
        }
        let newData =
            type == SORT_TYPE.ASC
                ? [...dataPriceFilter].sort((a, b) =>
                    a.high_price > b.high_price ? 1 : -1,
                )
                : [...dataPriceFilter].sort((a, b) =>
                    a.high_price < b.high_price ? 1 : -1,
                );
        setDataPriceFilter(newData);
        setIsSortPriceOpenClose(null);
        setIsSortName(null);
        setIsSortPercent(null);
        setIsSortPriceHighLow(type);
    };

    return (
        <>
            <HomeView
                data={data}
                dataPrice={dataPriceFilter}
                listImage={listImage}
                filterId={filterId}
                filters={filters}
                setFilterId={changeFilter}
                onSortByName={onSortByName}
                onSortByPercent={onSortByPercent}
                onSortByPriceOpenClose={onSortByPriceOpenClose}
                onSortByPriceHighLow={onSortByPriceHighLow}
            />
            <VersionChecker/>
        </>
    );
};

const mapStateToProps = (state) => {
    return {
        user: state.userReducer,
    };
};
export default connect(mapStateToProps, {showLoading, hideLoading})(Home);