import * as React from 'react';
import StepperBar from './StepperBar';
import {Container, Header, ThemeProps} from "./styles";
import ButtonBar from "./ButtonBar";
import { isEqual } from 'lodash';

export interface StepProps {
	state: string;
	label: string;
}

export interface ButtonData {
	action: (buttonName: string) => void;
	text: string;
}

export namespace Stepper {
	export interface Props {
		unlockedIndex: number;
		clickable: boolean;
		isDone: boolean;
		title: string;
		steps: StepProps[];
		onButtonClick: (btnData: ButtonData) => void;
		buttons?: ButtonData[];
		startStep?: number;
		onStepClick?: (step: StepProps) => void;
		theme?: ThemeProps;
		doneIcon?: any;
	}
	export interface State {
		currentStep: number;
		buttonData: ButtonData[];
	}
}

export default class Stepper extends React.Component<Stepper.Props, Stepper.State> {
	private doneIcon: any;
	constructor(props) {
		super(props);
		this.state = {
			currentStep: 0,
			buttonData: props.buttons
				? props.buttons
				: [{ text: 'Cancel', action: this.onButtonClick },{ text: 'Next', action: this.onButtonClick }],
		};
	}

	componentWillReceiveProps(nextProps: Stepper.Props) {
		if (!isEqual(nextProps.buttons, this.props.buttons) && nextProps.buttons) {
			this.setState({
				buttonData: nextProps.buttons,
			});
		}
	}

	componentDidMount() {
		if (this.props.startStep) {
			this.setState({ currentStep: this.props.startStep })
		}
	}

	onStepClick = step => {
		(this.props.clickable && step <= this.props.unlockedIndex)
			? this.setState({ currentStep: step })
			: null;
	};

	onButtonClick = (btnData) => {
		this.props.onButtonClick(btnData);
	};

	render() {
		console.log("is dont", this.props.isDone);
		return (
			<Container>
				<Header theme={this.props.theme}>{this.props.title}</Header>
				<StepperBar
					unlockedIndex={this.props.unlockedIndex}
					currentStep={this.props.clickable ? this.state.currentStep : this.props.unlockedIndex}
					onStepClick={this.onStepClick}
					steps={this.props.steps}
					clickable={this.props.clickable}
					isDone={this.props.isDone}
					theme={this.props.theme}
					doneIcon={this.props.doneIcon}
				/>
				{this.props.children}
				<ButtonBar
					buttons={this.state.buttonData}
					theme={this.props.theme}
				/>
			</Container>
		);
	}
};