import type {
  FormConfigField,
  FormFieldConfig,
} from '~/src/ui/components/form';

import useIsLargeScreen from '~/src/hooks/useIsLargeScreen';
import { useI18n } from '~/src/lib/i18n';
import {
  CollapsiblePanel,
  CollapsibleRoot,
  CollapsibleTrigger,
} from '~/src/ui/components/collapsible';
import { DragHandle } from '~/src/ui/components/draggable';
import { materializeField } from '~/src/ui/components/form';
import { SegmentedButton } from '~/src/ui/components/segmentedButton';
import { Layout } from '~/src/ui/layouts/layout';
import { Separator } from '~/src/ui/layouts/separator';
import { Button } from '~/src/ui/primitives/button';
import { Tag } from '~/src/ui/primitives/tag';
import { Text } from '~/src/ui/primitives/text';
import { FieldCategory } from './FieldCategory';
import { FormInputEdit } from './FormInputEdit';
import { FormSelectEdit } from './FormSelectEdit';

interface FormFieldEditProps {
  field: FormConfigField;
  onChange: (config: FormFieldConfig) => void;
  onDelete?: () => void;
}

export const FormFieldEdit = ({
  onChange,
  onDelete,
  field,
}: FormFieldEditProps) => {
  const i18n = useI18n('form');
  const isLargeScreen = useIsLargeScreen();
  const { type, required, label } = materializeField(field, i18n);

  const requiredControl = (
    <SegmentedButton
      defaultValue={required ? 'required' : 'optional'}
      options={[
        { value: 'required', label: 'Required' },
        { value: 'optional', label: 'Optional' },
      ]}
      onChange={(value) => {
        onChange({ required: value === 'required' });
      }}
    />
  );

  return (
    <CollapsibleRoot>
      <CollapsibleTrigger>
        <Layout gap="4" align="center" minWidth={0}>
          <DragHandle />
          <Layout minWidth={0}>
            <Text truncate>{label}</Text>
          </Layout>
          <Layout gap="4" align="center" shrink>
            <FieldCategory type={type} />
            {isLargeScreen
              ? requiredControl
              : required && <Tag variant="accent">Required</Tag>}
          </Layout>
        </Layout>
      </CollapsibleTrigger>
      <CollapsiblePanel>
        <Layout column gap="5">
          {!isLargeScreen && <Layout>{requiredControl}</Layout>}
          {type === 'select' || type === 'radio' ? (
            <FormSelectEdit field={field} onChange={onChange} />
          ) : (
            <FormInputEdit field={field} onChange={onChange} />
          )}
          <Separator />
          <Button
            variant="text-danger"
            size="small"
            onClick={() => onDelete?.()}
          >
            Remove Field
          </Button>
        </Layout>
      </CollapsiblePanel>
    </CollapsibleRoot>
  );
};