import { nothing } from 'lit-html';
import { directive, Directive, PartType } from 'lit/directive.js';

class CustomStyleMapDirective extends Directive {
  constructor(partInfo) {
    super(partInfo);
    if (partInfo.type !== PartType.ATTRIBUTE || partInfo.name !== "style" || partInfo.strings?.length > 2) {
      throw new Error(
        "`customStyleMap()` can only be used in the `style` attribute and must be the only part in the attribute."
      );
    }
  }
  render(styleInfoList) {
    const styles = Object.keys(styleInfoList).filter((key) => styleInfoList[key]);
    if (styles.length === 0) {
      return nothing;
    }
    return ` ${styles.join("; ")} `;
  }
}
const customStyleMap = directive(CustomStyleMapDirective);

export { CustomStyleMapDirective, customStyleMap };
