import { Segment, SegmentType } from "../funcs/fmt"

export function toPrintArgs_Web(segmentsList: Segment[][]): any[] {
    let args_main: any[] = []
    let args_styles: any[] = []

    // console.log("toPrintArgs_Web segmentsList:", segmentsList)

    for (let i = 0; i < segmentsList.length; i++) {
        const segments = segmentsList[i]
        let segmentArgs: any[] = []
        let segmentStyles: any[] = []
        for (const segment of segments) {
            let [content, type, options] = segment
            // Title
            if (type === SegmentType.Title || type === SegmentType.TitleWarn) {
                let splits = content.split("›")
                let hasHighlight = false
                const isWarn = type === SegmentType.TitleWarn

                if (splits.length > 1) {
                    content = splits.map((t: string, index: number) => {
                        let tRaw = t
                        if (!hasHighlight) {
                            segmentArgs.push(`%c${t}`)
                            segmentStyles.push(isWarn ? Style_TitleWarn : Style_Title)
                        } else {
                            segmentArgs.push(`%c${t}`)
                            segmentStyles.push(isWarn ? Style_TitleWarn2 : Style_Title2)
                        }

                        if (index === splits.length - 1) {
                            segmentArgs.push(`%c ›`)
                        } else {
                            segmentArgs.push(`%c›`)
                        }
                        segmentStyles.push(isWarn ? Style_TitleWarn_symbol : Style_Title_symbol)

                        // <👁|Request|Get|url>
                        //  如果第一个子标题是 Emoji 不占用高亮配额，用 3 字符长度判断是否是 Emoji（快速但不准确）
                        if (tRaw.length > 3) {
                            hasHighlight = true
                        }
                        return t
                    })
                } else {
                    segmentArgs.push(`%c${content}`)
                    segmentStyles.push(isWarn ? Style_TitleWarn : Style_Title)
                }
            } else if (type === SegmentType.Raw) {
                segmentArgs.push(`%c %O %c`)
                segmentStyles.push(Style_None)
                segmentStyles.push(content)
                segmentStyles.push(Style_None)
            } else if (type === SegmentType.Bold) {
                segmentArgs.push(`%c${content}`)
                segmentStyles.push(Style_Bold)
            } else if (type === SegmentType.Hero || type === SegmentType.HeroWarn) {
                let splits = content.split("|")

                if (splits.length > 1) {
                    let t1 = splits[0]
                    let t2 = splits.slice(1).join("")
                    if (type === SegmentType.HeroWarn) {
                        segmentArgs.push(`%c${t1}`)
                        segmentStyles.push(Style_HeroSplitWarn1)
                        segmentArgs.push(`%c${t2}`)
                        segmentStyles.push(Style_HeroSplitWarn2)
                    } else {
                        segmentArgs.push(`%c${t1}`)
                        segmentStyles.push(Style_HeroSplit1)
                        segmentArgs.push(`%c${t2}`)
                        segmentStyles.push(Style_HeroSplit2)
                    }
                } else {
                    if (type === SegmentType.HeroWarn) {
                        segmentArgs.push(`%c${content}`)
                        segmentStyles.push(Style_HeroWarn)
                    } else {
                        segmentArgs.push(`%c${content}`)
                        segmentStyles.push(Style_Hero)
                    }
                }
            } else if (type === SegmentType.Subtext) {
                segmentArgs.push(`%c${content}`)
                segmentStyles.push(Style_Subtext)
            } else if (type === SegmentType.Warn) {
                segmentArgs.push(`%c${content}`)
                segmentStyles.push(Style_Warn)
            } else if (type === SegmentType.Debug) {
                segmentArgs.push(`%c >>> %c ${content}`)
                segmentStyles.push(Style_Debug)
                segmentStyles.push(Style_None)
            } else {
                segmentArgs.push(`%c${content}`)
                segmentStyles.push(Style_None)
            }
        }
        args_main.push(segmentArgs.join(""))
        args_styles.push(...segmentStyles)

        // 如果不是最后一个段落，添加一个空格
        if (i < segmentsList.length - 1) {
            args_main.push("%c ")
            args_styles.push(Style_None)
        }
    }

    let finArgs = [args_main.join(""), ...args_styles]

    // console.log("toPrintArgs_Web args:", finArgs)
    return finArgs
}

const Style_None = ""
const Style_Bold = "font-weight: bold; color:rgba(249, 154, 11, 1);"
const Style_Warn = "  color:rgba(247, 34, 34, 1);"
const Style_Hero = `
            font-weight: bold;
            padding: 4px 8px;
            text-align: center;
            border-radius: 3px;
            letter-spacing:2px;
            font-size:12px;
            line-height:14px;
            color: #6a827d;
            background: #eef0e9;
            `
const Style_HeroWarn = `
            font-weight: bold;
            padding: 4px 8px;
            text-align: center;
            border-radius: 3px;
            letter-spacing:2px;
            font-size:12px;
            line-height:14px;
            color: #da420fff;
            background: #fce4e0ff;
            `

const Style_HeroSplit1 = `
  font-weight: bold;
            padding: 4px 8px;
            padding-right: 8px;
            text-align: center;
            border-radius: 3px 0 0 3px  ;
            font-size:12px;
            line-height:14px;
            color: #03846bff;
            background: #cbebdfff;
`

const Style_HeroSplit2 = `
            font-weight: bold;
            padding: 4px 8px;
            padding-left:  8px;
            text-align: center;
            border-radius: 0 3px 3px 0;
            font-size:12px;
            line-height:14px;
            color: #dbe9f1ff;
            background: #6366e8ff;
`

const Style_HeroSplitWarn1 = `
  font-weight: bold;
            padding: 4px 8px;
            padding-right: 8px;
            text-align: center;
            border-radius: 3px 0 0 3px  ;
            font-size:12px;
            line-height:14px;
            color: #d43900ff;
            background: #ffdabcff;
`

const Style_HeroSplitWarn2 = `
  font-weight: bold;
            padding: 4px 8px;
            padding-left:  8px;
            text-align: center;
            border-radius: 0 3px 3px 0;
            font-size:12px;
            line-height:14px;
            color: #fff8e7ff;
            background: #ec7c27ff;`

const Style_Subtext = "font-style: italic; color:rgba(164, 164, 164, 1);"
const Style_Title = "color: #01a184ff; font-weight:bold; "
const Style_Title2 = "color:rgba(3, 155, 172, 1); font-weight:bold; "
const Style_Title_symbol = "color:rgba(63, 171, 167, 1);"
const Style_TitleWarn = "color: #ff6034ff; font-weight:bold; "
const Style_TitleWarn2 = "color: #ff9966ff; font-weight:bold; "
const Style_TitleWarn_symbol = "color: #cc5030ff;"
const Style_Debug = `
            font-weight: bold;
            padding: 2px 4px;
            text-align: center;
            border-radius: 3px;
            font-size:12px;
            line-height:14px;
            color: #fff8e7ff;
            background: #3b27ecff;`