export const stringProp = (name: string, title: string, tip?: string, placeholder?: string) => {
  return {
    name: `style.--${name}`,
    title: {
      label: title,
      tip: `--${name} | ${tip || title}`,
    },
    propType: 'string',
    setter: [
      {
        componentName: 'StringSetter',
        props: {
          placeholder,
        },
      },
      'VariableSetter',
    ],
  };
};
export const pxProp = (name: string, title: string, tip?: string) => {
  return stringProp(name, title, tip, '请以px结尾');
};
export const padding = (
  type: '' | 'left' | 'right' | 'top' | 'bottom',
  title: string,
  tip?: string,
) => {
  let name = `padding`;
  if (!type) {
    name = `padding-${type}`;
  }
  return pxProp(name, title, tip);
};

export const lengthProp = (name: string, title: string, tip?: string) => {
  return {
    name: `style.--${name}`,
    title: {
      label: title,
      tip: `--${name} | ${tip || title}`,
    },
    propType: 'string',
    setter: [
      {
        componentName: 'StringSetter',
        props: {
          placeholder: '请以px、%、rem结尾',
        },
      },
      'VariableSetter',
    ],
  };
};

export const fontSize = (
  type: '' | 'header' | 'header-button' | 'item' | 'title' |'description' |'input',
  title: string,
  tip?: string,
) => {
  let name = `font-size`;
  if (type) {
    name = `${type}-font-size`;
  }
  return {
    name: `style.--${name}`,
    title: {
      label: title,
      tip: `--${name} | ${tip || title}`,
    },
    propType: 'string',
    setter: [
      {
        componentName: 'StringSetter',
        props: {
          placeholder: '请以px结尾',
          suffix: '%',
        },
      },
      'VariableSetter',
    ],
  };
};

export const backgroundColor = (type: 'active'| 'button' | 'input' , title: string, tip?: string) => {
  let name = `--background-color`;
  if (type) {
    name = `--${type}-background-color`;
  }
  return {
    name: `style.${name}`,
    title: {
      label: title,
      tip: `${name} | ${tip || title}`,
    },
    propType: 'string',
    setter: ['ColorSetter', 'VariableSetter'],
  };
};
export const color = (
  type:
    | ''
    | 'fill'
    | 'track'
    | 'background'
    | 'border'
    | 'placeholder'
    | 'disabled'
    | 'checked'
    | 'text'
    | 'checked-text'
    | 'inactive'
    | 'active'
    | 'active-line'
    | 'active-title'
    | 'input-font'
    | 'button-text'
    | 'onlybackground'  
    | 'active-dot'
    | 'dot',
  title: string,
  tip?: string,
) => {
  let name = `--color`;
  if (type) {
    name = `--${type}-color`;
  }
  if (type==="onlybackground") {
    name = `--${type}`;
  }
  return {
    name: `style.${name}`,
    title: {
      label: title,
      tip: `${name} | ${tip || title}`,
    },
    propType: 'string',
    setter: ['ColorSetter', 'VariableSetter'],
  };
};

export const border = (
  type: '' | 'left' | 'right' | 'top' | 'bottom' | 'inner' | 'checked'| 'radius',
  title: string,
  tip?: string,
) => {
  let name = `--border`;
  if (type) {
    name = `--border-${type}`;
  }
  return {
    name: `style.${name}`,
    title: {
      label: title,
      tip: `${name} | ${tip || title}`,
    },
    propType: 'string',
    setter: ['StringSetter', 'VariableSetter'],
  };
};

export const alignItems = (title: string, type?: string, defaultValue?: string, tip?: string) => {
  let name = `--align-items`;
  if (type) {
    name = `--align-items-${type}`;
  }
  return {
    name: `style.${name}`,
    title: {
      label: title,
      tip: `${name} | ${tip || title}`,
    },
    propType: {
      type: 'oneOf',
      value: ['start', 'end', 'center', 'stretch'],
    },
    defaultValue,
    setter: [
      {
        componentName: 'SelectSetter',
        props: {
          options: [
            {
              title: 'start',
              value: 'start',
            },
            {
              title: 'center',
              value: 'center',
            },
            {
              title: 'end',
              value: 'end',
            },
            {
              title: 'stretch',
              value: 'stretch',
            },
          ],
        },
      },
      'VariableSetter',
    ],
  };
};

export const width = (type: '' | 'prefix' | 'track' | 'text' |'max' |'min'
, title: string, tip?: string) => {
  let name = `width`;
  if (type) {
    name = `${type}-width`;
  }
  return pxProp(name, title, tip);
};
export const height = (type: '' | 'prefix' | 'track' | 'text', title: string, tip?: string) => {
  let name = `height`;
  if (type) {
    name = `${type}-height`;
  }
  return pxProp(name, title, tip);
};