import React from 'react';
import { render } from '@testing-library/react-native';
import { View } from 'react-native';
import FormOptions from '../Options';
import { useForm } from 'react-hook-form';
import { Provider } from '@xrnjs/ui';

const testOptions = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
  { label: 'Option 3', value: 'option3' },
];

describe('FormOptions', () => {
  const TestForm = ({ children }: { children: React.ReactNode }) => {
    const { control } = useForm({
      defaultValues: {
        testField: '',
        multipleField: [],
        singleField: '',
      },
    });

    return (
      <Provider>
        <View>
          {React.cloneElement(children as React.ReactElement, { control })}
        </View>
      </Provider>
    );
  };

  it('should render FormOptions with single selection', () => {
    const TestComponent = () => (
      <TestForm>
        <FormOptions
          name="singleField"
          label="Single Selection"
          options={testOptions}
          single
        />
      </TestForm>
    );

    render(<TestComponent />);
  });

  it('should render FormOptions with multiple selection', () => {
    const TestComponent = () => (
      <TestForm>
        <FormOptions
          name="multipleField"
          label="Multiple Selection"
          options={testOptions}
          multiple
        />
      </TestForm>
    );

    render(<TestComponent />);
  });

  it('should display error message when custom error is provided', () => {
    const TestComponent = () => (
      <TestForm>
        <FormOptions
          name="testField"
          label="Test Field"
          options={testOptions}
          customError="Custom error message"
        />
      </TestForm>
    );

    render(<TestComponent />);
  });

  it('should pass through all Options props correctly', () => {
    const TestComponent = () => (
      <TestForm>
        <FormOptions
          name="testField"
          label="Test Options"
          options={testOptions}
          columns={2}
          gap={15}
          showIcon
          mode="vertical"
          disabled
        />
      </TestForm>
    );

    render(<TestComponent />);
  });

  it('should handle required mark correctly', () => {
    const TestComponent = () => (
      <TestForm>
        <FormOptions
          name="testField"
          label="Required Field"
          options={testOptions}
          requiredMark={true}
        />
      </TestForm>
    );

    render(<TestComponent />);
  });

  it('should handle showToast prop correctly', () => {
    const TestComponent = () => (
      <TestForm>
        <FormOptions
          name="testField"
          label="Test Field"
          options={testOptions}
          showToast={false}
        />
      </TestForm>
    );

    render(<TestComponent />);
  });

  it('should render without crashing when no options provided', () => {
    const TestComponent = () => (
      <TestForm>
        <FormOptions name="testField" label="Test Field" options={[]} />
      </TestForm>
    );

    render(<TestComponent />);
  });
});