import { AxiosError } from "axios";
import React from "react";
import { Col, Row, Tab, Tabs } from "react-bootstrap";
import { withRouter } from "react-router";
import { RouteComponentProps } from "react-router-dom";

import { CommandCode, Region } from "@atlasacademy/api-connector";

import Api from "../Api";
import SkillBreakdown from "../Breakdown/SkillBreakdown";
import ErrorStatus from "../Component/ErrorStatus";
import Loading from "../Component/Loading";
import Manager from "../Setting/Manager";
import CommandCodeAsset from "./CommandCode/CommandCodeAsset";
import CommandCodeMainData from "./CommandCode/CommandCodeMainData";
import CommandCodePicker from "./CommandCode/CommandCodePicker";
import CommandCodePortrait from "./CommandCode/CommandCodePortrait";

interface IProps extends RouteComponentProps {
    region: Region;
    id: number;
    tab?: string;
}

interface IState {
    error?: AxiosError;
    loading: boolean;
    id: number;
    commandCodes: CommandCode.CommandCodeBasic[];
    commandCode?: CommandCode.CommandCode;
}

class CommandCodePage extends React.Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);

        this.state = {
            loading: true,
            id: this.props.id,
            commandCodes: [],
        };
    }

    componentDidMount() {
        Manager.setRegion(this.props.region);
        this.loadCraftEssence();
    }

    loadCraftEssence() {
        Promise.all([Api.commandCodeList(), Api.commandCode(this.state.id), Api.traitList()])
            .then(([commandCodes, commandCode]) => {
                document.title = `[${this.props.region}] Command Code - ${commandCode.name} - Atlas Academy DB`;
                this.setState({ commandCodes, commandCode, loading: false });
            })
            .catch((error) => this.setState({ error }));
    }

    render() {
        if (this.state.error) return <ErrorStatus error={this.state.error} />;

        if (this.state.loading || !this.state.commandCode) return <Loading />;

        const commandCode = this.state.commandCode;

        return (
            <div>
                <CommandCodePicker
                    region={this.props.region}
                    commandCodes={this.state.commandCodes}
                    id={commandCode.id}
                />
                <hr />

                <Row
                    style={{
                        marginBottom: "3%",
                    }}
                >
                    <Col xs={{ span: 12, order: 2 }} lg={{ span: 6, order: 1 }}>
                        <CommandCodeMainData region={this.props.region} commandCode={commandCode} />
                    </Col>
                    <Col xs={{ span: 12, order: 1 }} lg={{ span: 6, order: 2 }}>
                        <CommandCodePortrait commandCode={commandCode} />
                    </Col>
                </Row>

                <Tabs
                    id={"cc-tabs"}
                    defaultActiveKey={this.props.tab ?? "effects"}
                    mountOnEnter={false}
                    onSelect={(key: string | null) => {
                        this.props.history.replace(`/${this.props.region}/command-code/${this.props.id}/${key}`);
                    }}
                >
                    <Tab eventKey={"effects"} title={"Effects"}>
                        <br />
                        {commandCode.skills.map((skill) => {
                            return (
                                <SkillBreakdown
                                    key={skill.id}
                                    region={this.props.region}
                                    skill={skill}
                                    cooldowns={true}
                                />
                            );
                        })}
                    </Tab>

                    <Tab eventKey={"assets"} title={"Assets"}>
                        <br />
                        <CommandCodeAsset region={this.props.region} commandCode={commandCode} />
                    </Tab>
                </Tabs>
            </div>
        );
    }
}

export default withRouter(CommandCodePage);