import { __ } from '@wordpress/i18n';
import { ComboboxControl, __experimentalInputControl as InputControl, TabPanel } from '@wordpress/components';

import { FormSection, InfoTooltip } from '../common';
import { createGenericHandler } from '../../utils/fieldHandlers';
import { useSettingsContext } from '../../contexts/SettingsContext';
import { useCountriesContext } from '../../contexts/CountriesContext';
import Address from '../SenderAddress';
import Division from '../SenderDivision';
import styles from './style.module.scss';

const SenderData = ({ className }) => {
  const { settings, isSaving, updateSetting, saveSettings } = useSettingsContext();
  const { countries, isLoading: isLoadingCountries, error } = useCountriesContext();
  const handleChange = createGenericHandler(updateSetting);

  return (
    <FormSection
      className={className}
      title={__('Sender Data', 'nova-post-for-woocommerce')}
      onSave={saveSettings}
      isSaving={isSaving}
    >
      <InputControl
        value={settings.sender_first_name || ''}
        name="sender_first_name"
        label={__('First Name', 'nova-post-for-woocommerce')}
        placeholder={__('Enter first name', 'nova-post-for-woocommerce')}
        onChange={handleChange('sender_first_name')}
        __next40pxDefaultSize
      />

      <InputControl
        value={settings.sender_last_name || ''}
        name="sender_last_name"
        label={__('Last Name', 'nova-post-for-woocommerce')}
        placeholder={__('Enter last name', 'nova-post-for-woocommerce')}
        onChange={handleChange('sender_last_name')}
        __next40pxDefaultSize
      />

      <InputControl
        value={settings.sender_email || ''}
        name="sender_email"
        label={__('Email', 'nova-post-for-woocommerce')}
        placeholder={__('Enter email address', 'nova-post-for-woocommerce')}
        type="email"
        onChange={handleChange('sender_email')}
        __next40pxDefaultSize
      />

      <InputControl
        value={settings.sender_phone || ''}
        name="sender_phone"
        label={__('Phone', 'nova-post-for-woocommerce')}
        placeholder={__('Enter phone number', 'nova-post-for-woocommerce')}
        onChange={handleChange('sender_phone')}
        __next40pxDefaultSize
      />

      <InputControl
        name="company_tin"
        label={
          <div className="flex-center">
            <span>{__('Company TIN', 'nova-post-for-woocommerce')}</span>
            <InfoTooltip information={__('Enter your company\'s Taxpayer Identification Number.', 'nova-post-for-woocommerce')} />
          </div>
        }
        value={settings.company_tin || ''}
        onChange={handleChange('company_tin')}
        placeholder={__('Enter company TIN', 'nova-post-for-woocommerce')}
        __next40pxDefaultSize
      />

      <InputControl
        name="company_name"
        label={
          <div className="flex-center">
            <span>{__('Company Name', 'nova-post-for-woocommerce')}</span>
            <InfoTooltip information={__('Enter the full legal name of your company as specified in the registration documents.', 'nova-post-for-woocommerce')} />
          </div>
        }
        value={settings.company_name || ''}
        onChange={handleChange('company_name')}
        placeholder={__('Enter company name', 'nova-post-for-woocommerce')}
        __next40pxDefaultSize
      />

      <InputControl
        name="eori_code"
        label={
          <div className="flex-center">
            <span>{__('EORI Code', 'nova-post-for-woocommerce')}</span>
            <InfoTooltip information={__('Enter your EORI (Economic Operators Registration and Identification) number. It is mandatory for all companies engaged in importing or exporting goods within the European Union.', 'nova-post-for-woocommerce')} />
          </div>
        }
        value={settings.eori_code || ''}
        onChange={handleChange('eori_code')}
        placeholder={__('Enter EORI code', 'nova-post-for-woocommerce')}
        __next40pxDefaultSize
      />

      <InputControl
        name="ioss"
        label={
          <div className="flex-center">
            <span>{__('IOSS', 'nova-post-for-woocommerce')}</span>
            <InfoTooltip information={__('Enter your IOSS (Import One-Stop Shop) number if you are registered in this system. It is used to simplify VAT payments on sales of goods up to 150 EUR to buyers in the EU.', 'nova-post-for-woocommerce')} />
          </div>
        }
        value={settings.ioss || ''}
        onChange={handleChange('ioss')}
        placeholder={__('Enter IOSS', 'nova-post-for-woocommerce')}
        __next40pxDefaultSize
      />

      <div className={styles.departureMethodContainer}>
        <div className={styles.departureMethodHeader}>
          <span className={styles.departureMethodLabel}>
            {__('Shipment Departure Method', 'nova-post-for-woocommerce')}
          </span>
          <InfoTooltip 
            information={__('Configure your shipment departure method. Fill in the address fields if you want a courier to pick up shipments from your address (Pickup service). Select a division or a locker in the widget if you will bring the parcels yourself.', 'nova-post-for-woocommerce')}
          />
        </div>
        <TabPanel
          tabs={[
            { name: 'address', title: __('Address', 'nova-post-for-woocommerce') },
            { name: 'division', title: __('Division', 'nova-post-for-woocommerce') }
          ]}
          initialTabName={settings.address_type || 'address'}
          onSelect={handleChange('address_type')}
        >
          {(tab) => { }}
        </TabPanel>
      </div>

      <ComboboxControl
        __next40pxDefaultSize
        __nextHasNoMarginBottom
        name="country"
        label={__('Country', 'nova-post-for-woocommerce')}
        value={settings.sender_country || ''}
        isLoading={isLoadingCountries}
        expandOnFocus={false}
        options={countries}
        onChange={handleChange('sender_country')}
        placeholder={
          error
            ? __('Error loading countries', 'nova-post-for-woocommerce')
            : __('Enter Country', 'nova-post-for-woocommerce')
        }
      />

      <InputControl
        name="sender_city"
        __next40pxDefaultSize
        label={__('City', 'nova-post-for-woocommerce')}
        value={settings?.sender_city || ''}
        onChange={handleChange('sender_city')}
      />

      {(settings.address_type) === 'address' && (
        <Address />
      )}

      {(settings.address_type) === 'division' && (
        <Division />
      )}
    </FormSection>
  );
};

export default SenderData;
