import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';

vi.mock('@tamagui/core', () => ({
  useTheme: () => ({
    color: { val: '#111827' },
    gray: { val: '#6b7280' },
    borderColor: { val: '#e5e7eb' },
    primary: { val: '#FF5A5F' },
    surface: { val: '#ffffff' },
    red10: { val: '#b91c1c' },
  }),
}));

vi.mock('@tamagui/stacks', () => ({
  YStack: ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>,
  XStack: ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>,
}));

vi.mock('@tamagui/text', () => ({
  SizableText: ({ children, ...props }: { children: React.ReactNode }) => <span {...props}>{children}</span>,
}));

vi.mock('tamagui', () => ({
  Input: ({ ...props }: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
  TextArea: ({ ...props }: React.TextareaHTMLAttributes<HTMLTextAreaElement>) => <textarea {...props} />,
}));

vi.mock('@tamagui/select', () => {
  const SelectContext = React.createContext<{ onValueChange?: (value: string) => void } | null>(null);
  const Select = ({ children, onValueChange }: { children: React.ReactNode; onValueChange?: (value: string) => void }) => (
    <SelectContext.Provider value={{ onValueChange }}>
      <div>{children}</div>
    </SelectContext.Provider>
  );
  const Trigger = ({ children, ...props }: { children: React.ReactNode }) => <div {...props}>{children}</div>;
  const Value = ({ placeholder }: { placeholder?: React.ReactNode }) => <span>{placeholder}</span>;
  const Content = ({ children }: { children: React.ReactNode }) => <div>{children}</div>;
  const Viewport = ({ children }: { children: React.ReactNode }) => <div>{children}</div>;
  const Group = ({ children }: { children: React.ReactNode }) => <div>{children}</div>;
  const Item = ({ children, value }: { children: React.ReactNode; value: string }) => {
    const ctx = React.useContext(SelectContext);
    return (
      <button type="button" data-value={value} onClick={() => ctx?.onValueChange?.(value)}>
        {children}
      </button>
    );
  };
  const ItemText = ({ children }: { children: React.ReactNode }) => <span>{children}</span>;

  Select.Trigger = Trigger;
  Select.Value = Value;
  Select.Content = Content;
  Select.Viewport = Viewport;
  Select.Group = Group;
  Select.Item = Item;
  Select.ItemText = ItemText;

  return { Select };
});

import { MobileColorInput, MobileDateTimeInput, MobileFileInput, MobileSelect } from './FormControls';

describe('MobileSelect', () => {
  it('maps options and forwards selection changes', () => {
    const handleChange = vi.fn();

    render(
      <MobileSelect value="" onChange={handleChange}>
        <option value="">None</option>
        <option value="one">One</option>
      </MobileSelect>,
    );

    const items = screen.getAllByRole('button');
    fireEvent.click(items[1]);

    expect(handleChange).toHaveBeenCalledWith(
      expect.objectContaining({
        target: expect.objectContaining({ value: 'one' }),
      }),
    );
  });
});

describe('MobileColorInput', () => {
  it('renders a color input with default sizing', () => {
    render(<MobileColorInput value="#ff0000" onChange={vi.fn()} />);

    const input = screen.getByDisplayValue('#ff0000');
    expect(input).toHaveAttribute('type', 'color');
  });
});

describe('MobileFileInput', () => {
  it('renders a hidden file input', () => {
    render(<MobileFileInput data-testid="file-input" />);

    const input = screen.getByTestId('file-input');
    expect(input).toHaveAttribute('type', 'file');
  });
});

describe('MobileDateTimeInput', () => {
  it('renders a datetime-local input', () => {
    render(<MobileDateTimeInput value="2024-10-20T14:30" onChange={vi.fn()} />);

    const input = screen.getByDisplayValue('2024-10-20T14:30');
    expect(input).toHaveAttribute('type', 'datetime-local');
  });
});