import  {useState, useEffect, useImperativeHandle} from 'react';
import {AutoComplete, Empty, Tabs} from 'antd';
import { ResultListType} from "@common/const/api-detail";
import {Collapse} from "@common/components/postcat/api/Collapse";
import {Box} from "@mui/material";
import {Codebox} from "@common/components/postcat/api/Codebox";
import { cloneDeep } from 'lodash-es';
import { $t } from '@common/locales';

export interface ResponseExampleCompoEditorApi {
    getData: () => ResultListType[] | []
}

const DEFAULT_RESULT_LIST = [
    {id:'success',name:$t('成功示例'),httpCode:'200',content:''},
    {id:'failed',name:$t('失败示例'),httpCode:'200',content:''},
]

export const HTTP_STATUS_CODE = ['200', '403', '404', '410', '422', '500', '502', '503', '504']

export const CONTENT_TYPE_TYPE = [
    'application/json',
    'application/x-www-form-urlencoded',
    'image/jpeg',
    'image/png',
    'multipart/form-data',
    'text/asp',
    'text/css',
    'text/html',
    'text/html; charset=UTF-8',
    'text/plain',
    'text/xml'
]

export function ResponseExampleCompo ({ editorRef,title,detail,mode='view' }: {editorRef?: React.RefObject<ResponseExampleCompoEditorApi>,title:string, detail:resultList[]}) {
  const [resultDemos, setResultDemos] = useState<unknown>([]);

    useImperativeHandle(editorRef, () => ({
        getData: () => {
            return resultDemos||[]
        }
    }))

  useEffect(() => {
      if(mode === 'view'){
          setResultDemos(detail);
      }else{
          setResultDemos(detail?.length > 0 ? detail: cloneDeep(DEFAULT_RESULT_LIST))
      }
  }, [detail]);

  const updateResultList = (id:string, type:'httpCode' | 'httpContentType'|'content',value:string) => {
      setResultDemos((prevList)=>{
          for(let i = 0 ; i < prevList.length; i++){
              if(prevList[i].id === id){
                    prevList[i][type] = value
                    return prevList
              }
          }
      })
    }

  return (
      <Collapse title={title}>
        <Box width="100%">
        <Tabs className=" small-tabs" defaultActiveKey={resultDemos?.[0]?.id}>
          {resultDemos && resultDemos?.map((item:ResultListType) => (
            <Tabs.TabPane key={item.id} tab={item.name}>
              <div >
                <div className="ml-[8px] mb-[8px] flex">
                    {mode === 'view' ?
                         item.content ? <span className="mr-btnbase py-[5px] px-btnbase text-DEFAULT bg-[#f7f8fa] rounded border-[1px] border-solid border-DEFAULT"> HTTP Status Code: {item.httpCode}</span>:''
                        :  <AutoComplete
                            className="mr-btnbase rounded "
                            options={HTTP_STATUS_CODE.map((code)=>({label:code, value:code}))}
                            style={{ width: 200 }}
                            value={item.httpCode}
                            status={item.httpCode ? '' : 'error'}
                            onSelect={(value)=>updateResultList(item.id,'httpCode',value)}
                            placeholder={$t("HTTP 状态码")}
                        />
                    }
                     {mode === 'view' ?
                        item.content ?  <span className="mr-btnbase py-[5px] px-btnbase text-DEFAULT bg-[#f7f8fa] rounded border-[1px] border-solid border-DEFAULT">Content-Type: {item.httpContentType || 'text/html;charset=UTF-8'}</span>:''
                         : <AutoComplete
                             options={CONTENT_TYPE_TYPE.map((type)=>({label:type, value:type}))}
                             style={{ width: 200 }}
                             value={item.httpContentType || 'text/html;charset=UTF-8'}
                             onSelect={(value)=>updateResultList(item.id,'httpContentType',value)}
                             placeholder={$t("默认 text/html;charset=UTF-8")}
                         />}
                </div>
                  {mode === 'view' ?
                      <>
                          { item.content ?
                          <pre className="border-[1px] border-solid border-BORDER p-[6px] rounded w-auto min-h-[130px] max-h-[500px] overflow-auto mt-[0px]">{item.content}</pre>
                              :
                          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={$t("暂未填写示例")}/>
                        }</>
                      : <>
                          <Codebox value={item.content} language='json' width="100%" height={'250px'} onChange={(value)=>updateResultList(item.id,'content',value)}/>
                      </>
                  }
              </div>
            </Tabs.TabPane>
          ))}
        </Tabs>
        </Box>
      </Collapse>
  );
}

