import { useEffect, useState } from 'react';
import * as E from '@handpear/enums';
import { useResponding } from './useResponding';

interface SingleColRespondingWidthProps {
  colForm?: Record<keyof typeof E.COL_FORM, number> | number;
  colFormLabel?: Record<keyof typeof E.COL_FORM_LABEL, Record<'span', number>> | number;
  colFormWrapper?: Record<keyof typeof E.COL_FORM_WRAPPER, Record<'span', number>> | number;
}

/** 根据表单 col label wrapper 的配置获取单行节点响应式样式 */
export function useSingleColRespondingWidth(props?: SingleColRespondingWidthProps) {
  const [label, setLabel] = useState<`calc(${string})` | number>('calc(100%)');
  const [wrapper, setWrapper] = useState<`calc(${string})` | number>('calc(100%)');
  const { responding } = useResponding();

  useEffect(() => {
    const { colForm = E.COL_FORM, colFormLabel = E.COL_FORM_LABEL, colFormWrapper = E.COL_FORM_WRAPPER } = props || {};
    const grids = 24;
    let cf: number;
    let cfl: number;
    let cfw: number;

    if (typeof colForm === 'number') cf = colForm;
    else cf = colForm[responding];

    if (typeof colFormLabel === 'number') cfl = colFormLabel;
    else cfl = colFormLabel[responding].span;

    if (typeof colFormWrapper === 'number') cfw = colFormWrapper;
    else cfw = colFormWrapper[responding].span;

    setLabel(`calc(100% / ${grids / cf} / ${grids / cfl})`);
    // prettier-ignore
    setWrapper(`calc(100% - calc(100% / ${grids / cf} / ${grids / cfl}) - calc(100% / ${grids / cf} * (${grids - cfl - cfw} / ${grids})))`);

    return () => {
      setLabel('calc(100%)');
      setWrapper('calc(100%)');
    };
  }, [responding, props]);

  return { label, wrapper };
}