import { useState } from 'react';
import * as stylex from '@stylexjs/stylex';

import type { ReactNode } from 'react';
import type { FormSectionProps } from '../types';

import ChevronIconWrapper from '~/src/components/Icon/ChevronIcon';
import { Form } from '~/src/ui/components/form';
import { FormBuilder } from '~/src/ui/components/formBuilder';
import { Layout } from '~/src/ui/layouts/layout';
import { Separator } from '~/src/ui/layouts/separator';
import { Clickable } from '~/src/ui/primitives/clickable';
import { Text } from '~/src/ui/primitives/text';
import { colors, spacing } from '~/src/ui/tokens/tokens.stylex';

interface FormSectionSettingsProps {
  data: FormSectionProps;
  onChange(data: Record<string, unknown>): void;
}

export const FormSectionSettings = ({
  onChange,
  data: { title, fields, submit },
}: FormSectionSettingsProps) => {
  const [activeOption, setActiveOption] = useState<string>();

  return (
    <Layout column gap="5">
      {activeOption === 'editForm' && (
        <FormBuilder defaultConfig={{ fields, submit }} />
      )}
      <Form
        onChange={(data) => onChange({ title: data.title })}
        config={{
          fields: [
            {
              type: 'text',
              name: 'title',
              label: 'Section Title',
              placeholder: 'Title will be displayed above the form',
              defaultValue: title,
            },
          ],
        }}
      />
      <Layout column>
        <Separator />
        <ListItem
          title="Edit Form"
          onClick={() => setActiveOption('editForm')}
        />
        <ListItem
          title="Privacy Policy Acknowledgement"
          onClick={() => setActiveOption('')}
        />
      </Layout>
    </Layout>
  );
};

const listStyles = stylex.create({
  item: {
    paddingTop: spacing[6],
    paddingBottom: spacing[6],
    borderBottomWidth: 1,
    borderBottomColor: colors.gray300,
    borderBottomStyle: 'solid',
  },
});

const ListItem = ({
  title,
  onClick,
}: {
  title: ReactNode;
  onClick: () => void;
}) => (
  <Clickable onClick={onClick} style={listStyles.item}>
    <Layout justify="space-between" gap="2">
      <Text>{title}</Text>
      <ChevronIconWrapper direction="right" />
    </Layout>
  </Clickable>
);