import { createDesigner } from 'designer'
import { onReadComponentMeta } from 'linkage-protocol'
return <Designer onReadComponentMeta={onReadComponentMeta} />

{
  "componentName": "input",
  "linkage": [{
    "target": "input1",
    "do": {
      "value": "{{ $self.value + 'hello' }}"
    }
  }]
}

{
  "componentName": "input",
  "linkage": [{
    "deps": ["input1", "input2"]
    "props": {
      "text": "{{ $deps[0].value + deps[1].value }}"
    }
  }]
}

const extendMeta = {
  // 定義 valueRelates 關(guān)系，就是我們上一節(jié)提到的定義組件聯(lián)動關(guān)系的 key
  valueRelates: ({ componentId, selector }) => {
    // 利用 selector 讀取組件實例 linkage 屬性
    // 由于 selector 的特性，會實時更新，因此聯(lián)動協(xié)議變化后，聯(lián)動狀態(tài)也會實時更新
    const linkage = selector(({ componentInstance }) => componentInstance.linkage)
    // 返回聯(lián)動數(shù)組，結(jié)構(gòu): [{ sourceComponentId, targetComponentId, payload }]
    return linkage.map(relation => {
        const result = [];
        // 定義此類聯(lián)動類型，就叫做 simpleRelation
        const payload = {
          type: 'simpleRelation',
          do: JSON.parse(
            JSON.stringify(relation.do)
              // 將 $deps[index] 替換為 $deps[componentId]
              .replace(
                /\$deps\[([0-9]+)\]/g,
                (match: string, index: string) =>
                  `$deps['${relation.deps[Number(index)]}']`,
              )
              // 將 $self 替換為 $deps[componentId]
              .replace(/\$self/g, () => `$deps['${componentId}']`),
          ),
        };
        // 經(jīng)過上面的代碼，表達式里無論是 $self. 還是 $deps[0]. 都轉(zhuǎn)化為了
        // $deps[componentId] 這個具體組件 ID，這樣后面處理流程會簡單而統(tǒng)一
        // 讀取 deps，并定義 dep 組件作為 source，target 作為目標組件
        // 這是最關(guān)鍵的一步，將 dep -> target 關(guān)系綁定上
        relation.target.forEach((targetComponentId) => {
          if (relation.deps) {
            relation.deps.forEach((depIdPath: string) => {
              result.push({
                sourceComponentId: depIdPath,
                targetComponentId,
              });
            });
          }
          // 定義自己到 target 目標組件的聯(lián)動關(guān)系
          result.push({
            sourceComponentId: componentId,
            targetComponentId,
            payload,
          });
        });
        return result;
      }).flat()
  }
}

const extendMeta = {
  runtimeProps: ({ componentId, selector, getProps, getMergedProps }) => {
    // 拿到作用于自己的值關(guān)聯(lián)信息: relates
    const relates = selector(({ relates }) => relates);
    // 記錄最終因為值聯(lián)動而影響的 props
    let relationProps: any = {};
    // 記錄關(guān)聯(lián)到自己的組件此時組件值
    const $deps = relates?.reduce(
      (result, next) => ({
        ...result,
        [next.componentId]: {
          value: next.value,
        },
      }),
      {},
    );
    // 為了讓每個依賴變化都能生效，多對一每一項 do 都帶過來了，需要按照 relationIndex 先去重
    relates
      .filter((relate) => relate.payload?.type === 'simpleRelation')
      .forEach((relate) => {
        const expressionArgs = {
          // $deps[].value 指向依賴的 value
          $deps,
          get,
          getProps: relate.componentId === componentId ? getProps : getMergedProps,
        };
        // 處理 props 聯(lián)動
        if (isObject(relate.payload?.do?.props)) {
          Object.keys(relate.payload?.do?.props).forEach((propsKey) => {
            relationProps = set(
              propsKey,
              selector(
                () =>
                  // 這個函數(shù)是關(guān)鍵，傳入組件 props 與表達式，返回新的 props 值
                  getExpressionResult(
                    get(propsKey, relate.payload?.do?.props),
                    expressionArgs,
                  ),
                {
                  compare: equals,
                  // 根據(jù)表達式數(shù)量可能不同，所以不啟用緩存
                  cache: false,
                },
              ),
              relationProps,
            );
          });
        }
      });
    return relationProps
  }
}

// 代碼執(zhí)行沙盒，傳入字符串 js 函數(shù)，利用 new Function 執(zhí)行
function sandBox(code: string) {
  // with 是關(guān)鍵，利用 with 定制代碼執(zhí)行的上下文
  const withStr = `with(obj) { 
    $[code]
  }`;
  const fun = new Function('obj', withStr);
  return function (obj: any) {
    return fun(obj);
  };
}
// 獲取沙盒代碼執(zhí)行結(jié)果，可以傳入?yún)?shù)覆蓋沙盒內(nèi)上下文
function getSandBoxReturnValue(code: string, args = {}) {
  try {
    return sandBox(code)(args);
  } catch (error) {
    // eslint-disable-next-line no-console
    console.warn(error);
  }
}
// 如果對象是字符串則直接返回，是 {{}} 表達式則執(zhí)行后返回
function getExpressionResult(code: string, args = {}) {
  if (code.startsWith('{{') && code.endsWith('}}')) {
    // {{}} 內(nèi)的表達式
    let codeContent = code.slice(2, code.length - 2);
    // 將形如 $deps['id'].props.a.b.c
    // 轉(zhuǎn)換為 get('a.b.c', getProps('id'))
    codeContent = codeContent.replace(
      /\$deps\[['"]([a-zA-Z0-9]*)['"]\]\.props\.([a-zA-Z0-9.]*)/g,
      (str: string, componentId: string, propsKeyPath: string) => {
        return `get('${propsKeyPath}', getProps('${componentId}'))`;
      },
    );
    return getSandBoxReturnValue(`return ${codeContent}`, args);
  }
  return code;
}