import React from 'react';
import { injectIntl } from 'react-intl';
import '@testing-library/jest-dom';
import { render, screen, fireEvent } from '../../../utils/test-utils';
import { CapWhatsappCTA } from '../index';

// Mock the missing reducer
jest.mock('@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/reducer', () => {
  return (state = {}) => state;
}, { virtual: true });

const updateHandler = jest.fn();
const deleteHandler = jest.fn();
const initializeComponent = (
  data,
  isEditFlow = false,
  host = 'twiliowhatsapptrans',
) => {
  const Component = injectIntl(CapWhatsappCTA);
  return render(
    <Component
      ctaData={data}
      updateHandler={updateHandler}
      deleteHandler={deleteHandler}
      isEditFlow={isEditFlow}
      hostName={host}
    />,
  );
};

describe('CapWhatsappCTA', () => {
  it('Test if CapWhatsappCTA component renders', () => {
    initializeComponent([
      {
        index: 0,
        ctaType: 'PHONE_NUMBER',
        text: '',
        phone_number: '9112345',
        urlType: 'STATIC_URL',
        url: '',
        isSaved: false,
      },
    ]);
    expect(screen.getByText('Type of action')).toBeInTheDocument();
    expect(screen.getByText('Button text')).toBeInTheDocument();
    expect(screen.getAllByText('Phone number')[1]).toBeInTheDocument();
  });
  it('first button', async () => {
    initializeComponent([
      {
        index: 0,
        ctaType: 'PHONE_NUMBER',
        text: '',
        phone_number: '9112345',
        urlType: 'STATIC_URL',
        url: '',
        isSaved: false,
      },
    ]);
    const btnTextEvent = {
      target: {
        value: 'Call us',
        id: 0,
      },
    };
    // button text
    const buttontextInput = await screen.getByPlaceholderText(
      'Enter button text',
    );
    fireEvent.change(buttontextInput, btnTextEvent);
    expect(updateHandler).toHaveBeenCalledWith(
      {
        index: 0,
        ctaType: 'PHONE_NUMBER',
        text: 'Call us',
        phone_number: '9112345',
        urlType: 'STATIC_URL',
        url: '',
        isSaved: false,
      },
      '0',
    );
  });
  it('second button', async () => {
    initializeComponent([
      {
        index: 0,
        ctaType: 'PHONE_NUMBER',
        text: 'Call us',
        phone_number: '9112345',
        urlType: 'STATIC_URL',
        url: '',
        isSaved: true,
      },
      {
        index: 1,
        ctaType: 'WEBSITE',
        text: 'Visit us',
        phone_number: '',
        urlType: 'STATIC_URL',
        url: '',
        isSaved: false,
      },
    ]);
    const urlEvent1 = {
      target: {
        value: 'https://www.google.co.in',
        id: 1,
      },
    };
    const urlEvent2 = {
      target: {
        value: 'test',
        id: 1,
      },
    };
    // button text
    const urlInput = await screen.getByPlaceholderText('Enter website URL');
    fireEvent.change(urlInput, urlEvent1);
    expect(updateHandler).toHaveBeenCalledWith(
      {
        index: 1,
        ctaType: 'WEBSITE',
        text: 'Visit us',
        phone_number: '',
        urlType: 'STATIC_URL',
        url: 'https://www.google.co.in',
        isSaved: false,
      },
      '1',
    );
    fireEvent.change(urlInput, urlEvent2);
  });
  it('both buttons', async () => {
    initializeComponent([
      {
        index: 0,
        ctaType: 'PHONE_NUMBER',
        text: 'Call us',
        phone_number: '9112345',
        urlType: 'STATIC_URL',
        url: '',
        isSaved: true,
      },
      {
        index: 1,
        ctaType: 'WEBSITE',
        text: 'Visit us',
        phone_number: '',
        urlType: 'STATIC_URL',
        url: 'https://www.google.co.in',
        isSaved: true,
      },
    ]);
    expect(
      screen.getByText(/https:\/\/www\.google\.co\.in/i),
    ).toBeInTheDocument();
  });
  it('Test if gupshup CapWhatsappCTA component renders', () => {
    initializeComponent([
      {
        index: 0,
        ctaType: 'WEBSITE',
        text: 'info',
        phone_number: '',
        urlType: 'STATIC_URL',
        url: 'https://www.google.co.in',
        isSaved: false,
      },
    ], false, 'gupshupwhatsappbulk');
    expect(screen.getByText('Type of action')).toBeInTheDocument();
    expect(screen.getByText('Button text')).toBeInTheDocument();
    expect(screen.getByText(/save/i)).toBeEnabled();
  });
});
