import React from "react";
import { Alert } from "react-bootstrap";

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

import renderCollapsibleContent from "../../Component/CollapsibleContent";
import IllustratorDescriptor from "../../Descriptor/IllustratorDescriptor";
import ServantLimitImage from "./ServantLimitImage";
import ServantModelViewer from "./ServantModelViewer";

import "./ServantAssets.css";

interface IProps {
    region: Region;
    servant: Servant.Servant;
}

class ServantAssets extends React.Component<IProps> {
    private flattenAssets(assetMap: Entity.EntityAssetMap | undefined): string[] {
        if (!assetMap) return [];

        const assets = [];

        if (assetMap.ascension) assets.push(...Object.values(assetMap.ascension));

        if (assetMap.costume) assets.push(...Object.values(assetMap.costume));

        return assets;
    }

    private flattenStoryAssets(assetMap: Entity.EntityAssetMap | undefined): string[] {
        if (!assetMap) return [];

        const assets = [];

        if (assetMap.story) assets.push(...Object.values(assetMap.story));

        return assets;
    }

    private displayAssets(
        assetMap: Entity.EntityAssetMap | undefined,
        size: { width: number; height: number } | undefined = undefined,
        story = false
    ) {
        const assets = story ? this.flattenStoryAssets(assetMap) : this.flattenAssets(assetMap);
        const getImg =
            size !== undefined
                ? (asset: string) => (
                      <img
                          alt=""
                          src={asset}
                          width={size.width}
                          height={size.height}
                          className="servant-asset-images"
                      />
                  )
                : (asset: string) => <img alt="" src={asset} className="servant-asset-images" />;

        return (
            <>
                {assets.map((asset) => (
                    <a key={asset} href={asset} target="_blank" rel="noopener noreferrer">
                        {getImg(asset)}
                    </a>
                ))}
            </>
        );
    }

    render() {
        const charaFigure = (
            <>
                {this.displayAssets(this.props.servant.extraAssets.charaFigure)}
                <br />
                {Object.entries(this.props.servant.extraAssets.charaFigureForm).map(([form, assetMap]) => (
                    <div key={form}>
                        {renderCollapsibleContent({
                            title: `Form ${form}`,
                            content: this.displayAssets(assetMap),
                            subheader: true,
                        })}
                    </div>
                ))}
                <br />
                {Object.entries(this.props.servant.extraAssets.charaFigureMulti).map(([idx, assetMap]) => (
                    <div key={idx}>
                        {renderCollapsibleContent({
                            title: `Character ${idx}`,
                            content: this.displayAssets(assetMap),
                            subheader: true,
                        })}
                    </div>
                ))}
            </>
        );

        const charaGraphSize = { width: 512, height: 724 };
        const narrowFigureSize = { width: 148, height: 375 };
        const faceSize = { width: 128, height: 128 };

        const content = [
            {
                title: "Portraits",
                content: (
                    <>
                        {this.displayAssets(this.props.servant.extraAssets.charaGraph, charaGraphSize)}
                        {this.displayAssets(this.props.servant.extraAssets.charaGraphEx, charaGraphSize)}
                        {this.displayAssets(this.props.servant.extraAssets.charaGraphChange, charaGraphSize)}
                    </>
                ),
            },
            {
                title: "Status",
                content: this.displayAssets(this.props.servant.extraAssets.status, { width: 256, height: 256 }),
            },
            {
                title: "Command",
                content: this.displayAssets(this.props.servant.extraAssets.commands, { width: 256, height: 256 }),
            },
            {
                title: "Formation",
                content: (
                    <>
                        {this.displayAssets(this.props.servant.extraAssets.narrowFigure, narrowFigureSize)}
                        {this.displayAssets(this.props.servant.extraAssets.narrowFigureChange, narrowFigureSize)}
                    </>
                ),
            },
            {
                title: "Thumbnail",
                content: (
                    <>
                        {this.displayAssets(this.props.servant.extraAssets.faces, faceSize)}
                        {this.displayAssets(this.props.servant.extraAssets.facesChange, faceSize)}
                    </>
                ),
            },
            { title: "Figure", content: charaFigure },
        ].map((a) => Object.assign({}, a, { subheader: false }));
        return (
            <div>
                <Alert variant="success">
                    <IllustratorDescriptor
                        region={this.props.region}
                        illustrator={this.props.servant.profile?.illustrator}
                    />
                </Alert>
                <ServantModelViewer servant={this.props.servant} />
                <ServantLimitImage region={this.props.region} servant={this.props.servant} />
                {content.map((content) => (
                    <div key={content.title}>{renderCollapsibleContent(content)}</div>
                ))}
                {this.props.servant.extraAssets.charaFigure.story
                    ? renderCollapsibleContent({
                          title: "Story Figure (May contain spoilers)",
                          content: (
                              <>
                                  {this.displayAssets(this.props.servant.extraAssets.charaFigure, undefined, true)}
                                  {this.displayAssets(this.props.servant.extraAssets.image, undefined, true)}
                              </>
                          ),
                          subheader: false,
                          initialOpen: false,
                      })
                    : ""}
                <br />
                {Object.entries(this.props.servant.extraAssets.charaFigureForm).map(([form, assetMap]) => (
                    <div key={form}>
                        {assetMap.story
                            ? renderCollapsibleContent({
                                  title: `Story Figure Form ${form}`,
                                  content: this.displayAssets(assetMap, undefined, true),
                                  subheader: true,
                                  initialOpen: false,
                              })
                            : null}
                    </div>
                ))}
            </div>
        );
    }
}

export default ServantAssets;