import "./AssetsGroups.scss";

import React, {Component} from "react";
import classNames from "classnames";
import {Provider} from 'sbx-react-core';
import Icon from "sbx-react-icon";
import {setSetting} from "actions/Settings";

import Tooltip from "sbx-react-tooltip";

const star = require('../../../../assets/icons/star.svg');
const basket = require('../../../../assets/icons/basket.svg');

@Provider({
    activeGroup: ['settings', 'group'],
    groups: ['groups']
})

export default class AssetsGroups extends Component {
    onChange = group => {
        setSetting({setting: 'group', value: group})
    };
    render() {
        const {activeGroup} = this.props;
        const groups = [...this.props.groups];
        return (
            <div className="assetsGroup">
                <div className="assetsGroup-list">
                    {
                        groups.map(group => {
                            if(__config.GROUP_DISABLE && __config.GROUP_DISABLE.includes(group))
                                return null

                            return (
                                <Tooltip position="bottom" data={group}>
                                    <div
                                        className={classNames({
                                            "assetsGroup-list-item": true,
                                            "active": activeGroup === group
                                        })}
                                        onClick={() => {
                                            this.onChange(group)
                                        }}
                                    >
                                        {group === "favorites" && <Icon src={star}/>}
                                        {group !== "favorites" && group !== "basket" && group.substring(0, 3)}
                                    </div>
                                </Tooltip>

                            )
                        })
                    }
                </div>
            </div>
        )
    }
}