import * as React from "react";
import GroupItem from "../groupItem";

class GroupLeft extends React.Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            style: {}
        }
    }

    componentDidMount(): void {

    }

    onClick(index) {
        this.props.onChoose ? this.props.onChoose(index) : ''

    }


    render() {
        let groupList = this.props.data;
        let currentIndex = this.props.select;
        return (
            <ul className={'shop-tabs shop-tabs-left'}>
                {
                    groupList.map((item, index) => (
                        <GroupItem key={item.id} name={item.name}
                                   selected={index == currentIndex}
                                   onChoose={this.onClick.bind(this, index)}
                        >
                            {
                                index == currentIndex ?
                                    <div>
                                        <span className={'shop-tabs-radius-top'}></span>
                                        <span className={'shop-tabs-radius-bottom'}></span>
                                    </div> : ''
                            }
                        </GroupItem>
                    ))
                }
            </ul>
        );
    }
}

export default GroupLeft;