import  { useEffect, useMemo } from 'react';
import { Cascader } from 'antd';
import CODE_LANG from '@common/const/code/const';
import type { DefaultOptionType } from 'antd/es/cascader';
import { useState } from 'react';
import { cloneDeep } from 'lodash-es';
import {  paramsJsonType } from './code-snippets.type';
import { DOMAIN_SUFIX } from './code-example.type';
import { transfromUrlParam } from './transform';
import { generateCode } from './generate-code';
import {ApiDetail} from "@common/const/api-detail";
import {Codebox} from "@common/components/postcat//api/Codebox";
import {Collapse} from "@common/components/postcat/api/Collapse";
import {Box} from "@mui/material";
import { $t } from '@common/locales';
import { useGlobalContext } from '@common/contexts/GlobalStateContext';

type CodeSnippetCompoType = {
  title:string
  api:ApiDetail,
  extraTitle:unknown,
  extraContent:unknown,
  minLines:number
}

  const file: unknown[] = []
  const env: unknown = {}
  const loading: boolean = false
  const codeMode: string = 'rust'
  const codeMens: string[] = ['reset', 'copy', 'download', 'newTab', 'search']
  const DOMAIN_REGEX: RegExp = new RegExp(
      `^(((http|ftp|https):\/\/)|)(([\\\w\\\-_]+([\\\w\\\-\\\.]*)?(\\\.(${DOMAIN_SUFIX.join(
          '|'
      )})))|((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))|(localhost))((\\\/)|(\\\?)|(:)|($))`
  )

  let isMultipart: boolean = false

  export default function CodeSnippetCompo({title,api, extraTitle, extraContent, minLines=15}: CodeSnippetCompoType) {
    const {state }  = useGlobalContext()
    // const [tokenState ] = useTokenBasicInfo()
    const pretreatmentRequestInfo = (apiDoc: ApiDetail) =>{
      isMultipart = false
      const result: ApiDetail = cloneDeep(apiDoc)
      const files: unknown = file || []
      let isMuti: boolean = false
      const headers: string[] = []
      let alreadyHadContentType: boolean = false
      result.headers = []
      const originHeader = apiDoc.requestParams?.headerParams
      //处理请求头部
      originHeader?.forEach((header: unknown) => {
        // if (
        //     tokenState?.selected_X_apibee_token &&
        //     originHeader.length &&
        //     originHeader[0].name == 'X-APISpace-Token'
        // ) {
        //   originHeader[0].value = tokenState?.selected_X_apibee_token
        // }
        const { checkbox, name } = header
        if ((checkbox || !header.hasOwnProperty('checkbox')) && name) {
          headers.push(name?.toLowerCase())
          result.headers.push(header)
          if (/content-type/i.test(name)) {
            alreadyHadContentType = true
          }
        }
      })
      const query: unknown = {}

      apiDoc.requestParams?.queryParams?.forEach((query: unknown) => {
        const { checkbox, name } = query
        if ((checkbox || !query.hasOwnProperty('checkbox')) && name) {
          query[name] = query?.paramAttr.example || ''
        }
      })
      result.URL = transfromUrlParam(result.uri, query)

      //处理 restful 参数
      apiDoc.requestParams?.restParams?.forEach((rest: unknown) => {
        if ((rest.checkbox || !rest.hasOwnProperty('checkbox')) && rest.name && rest.paramAttr.example) {
          if (eval(`/:${rest.name}/`).test(result.URL.trim())) {
            result.URL = result.URL.replaceAll(`:${rest.name}`, rest.paramAttr.example )
          } else if (
              result.URL.trim().indexOf(`{{${rest.name}}}`) == -1 &&
              result.URL.trim().indexOf(`{${rest.name}}`) > -1
          ) {
            result.URL = result.URL.replaceAll(`{${rest.name}}`, rest.paramAttr.example)
          }
        }
      })

      result.params = []
      //为请求参数 中的header、reset、body、query 添加 value 和 valueQuery  的值
      switch (result.requestParams?.bodyParams?.[0]?.contentType) {
        case 0: {
          result.requestParams?.bodyParams?.forEach((body: unknown, key: unknown) => {
            if ((body.checkbox || !body.hasOwnProperty('checkbox')) && body.name) {
              if (paramsJsonType[body.dataType] == 'string' && body.paramAttr.example) {
                isMuti = true
                body.files = files[key] || []
              }
              result.params.push(body)
            }
          })
          if (!alreadyHadContentType) {
            if (isMuti) {
              isMultipart = true
              result.headers.push({
                name: 'Content-Type',
                value: 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW',
                checkbox: true
              })
            } else {
              result.headers.push({
                name: 'Content-Type',
                value: 'application/x-www-form-urlencoded',
                checkbox: true
              })
            }
          }
          break
        }
        case 1: {
          result.params = apiDoc.requestParams?.bodyParams
          break
        }
        case 2: {
          result.params = apiDoc.requestParams?.bodyParams
          if (!alreadyHadContentType) {
            result.headers.push({
              name: 'Content-Type',
              value: 'application/json',
              checkbox: true
            })
          }
          break
        }
        case 3: {
          result.params = apiDoc.requestParams?.bodyParams
          if (!alreadyHadContentType) {
            result.headers.push({
              name: 'Content-Type',
              value: 'application/xml',
              checkbox: true
            })
          }
          break
        }
      }
      
      result.requestType = result.requestParams?.bodyParams?.[0]?.contentType || 0
      return result
    }

    const [code, setCode] = useState<string>('')
    const [lang, setLang] = useState<number[]>([20])

    let tempCode = ''
    const getCode = (language: number | string) => {
      if (!['HTTPS', 'HTTP'].includes(api.protocol?.toUpperCase())) {
        tempCode = $t('暂不支持生成非 HTTPS 或非 HTTP 协议的代码示例')
        setCode(tempCode)
        return
      }
      tempCode = generateCode(
          language.toString(),
          isMultipart,
          pretreatmentRequestInfo(cloneDeep(api))
      )
      setCode(tempCode)
    }

    useEffect(() => {
      if(!Object.keys(api).length) return
      getCode(lang[lang.length -1 ])
    }, [api])


    const onChange = (value: number[],record:DefaultOptionType[]) => {
      const num = value[value.length - 1]
      setLang(value)
      if(!Object.keys(api).length) return
      getCode(num)
    };

    const filter = (inputValue: string, path: DefaultOptionType[]) =>
        path.some(
            (option) => (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
        );

    const [placeholderTxt, setPlaceholderTxt] = useState($t('搜索编程语言...'))
    const [selectItemTxt, setSelectItemTxt ] = useState('')

    const codeLangOptions = useMemo(()=>CODE_LANG.map(x=>({...x, label:$t(x.label as string)})),[state.language])
    return  (

        <Collapse title={title}>
          <Box width="100%">
            <>
            <Codebox extraContent={<><span className="ml-[12px]">{$t('编程语言')}：</span><Cascader
                  options={codeLangOptions}
                  onChange={(value,record) => onChange(value as unknown as number[],record)}
                  placeholder={placeholderTxt}
                  value={lang} // 当前的值
                  showSearch={{ filter }}
                  size="small"
                  allowClear={false}
                  // onDropdownVisibleChange={value => openChange(value)}
              /></>} 
              language={'javascript'} value={code} readOnly={true} height={'250px'} width={'100%'}/>
            </>
          </Box>
        </Collapse>

    )

  }