import type { FunctionalComponent } from 'preact';

import { SectionCard } from '../../core';
import { CheckboxField } from '../../forms';

type ElementBehaviorFieldsProps = {
  t: (key: string, fallback?: string) => string;
  form: any;
};

export const ElementBehaviorFields: FunctionalComponent<ElementBehaviorFieldsProps> = ({ t, form }) => (
  <SectionCard
    title={t('elements.options.title', 'Behavior')}
    description={t('elements.options.helper', 'Choose how the element behaves when added to the canvas.')}
  >
    <div className="ask-flex ask-flex-col ask-gap-2">
      <CheckboxField
        label={t('common.bringToFront', 'Bring to front')}
        checked={Boolean((form.values as any).bringToFront)}
        onCheckedChange={(checked) => form.setValue('bringToFront', checked)}
      />

      <CheckboxField
        label={t('elements.form.selectable', 'Selectable')}
        checked={Boolean((form.values as any).selectable)}
        onCheckedChange={(checked) => form.setValue('selectable', checked)}
      />

      <CheckboxField
        label={t('elements.form.evented', 'Evented')}
        checked={Boolean((form.values as any).evented)}
        onCheckedChange={(checked) => form.setValue('evented', checked)}
      />
    </div>
  </SectionCard>
);
