import { t } from '../../../../i18n';
import { Element } from '@tempi/core-editor';
import {
  getColWidthProps,
  ParagraphEditor,
  WebsiteFooterEditor,
  ColEditor,
  RowEditor,
  ListItemEditorV2,
  ListItemIconEditorV2,
  Position,
  ListItemContentEditorV2,
  FormV4Editor,
  ButtonSubmitV3Editor,
  SocialIconEditor,
  ImageEditor,
} from '@tempi/core-elements';
import { UnitEnum } from '@tempi/core-renderer';
export const getWebsiteFooter2 = () => {
  const getTitleEditor = (text: string) => (
    <ParagraphEditor
      text={`<p style=\"--fontSizeDesktop: 14px; --fontSizeMobile: 12px\" class=\"fs-desktop fs-mobile\"><strong>${text}</strong></p>`}
      commonStyle={{
        margin: {
          bottom: 20,
        },
      }}
    />
  );
  const getTextEditor = (text: string) => (
    <ParagraphEditor
      text={`<p style=\"--fontSizeDesktop: 14px; --fontSizeMobile: 12px\" class=\"fs-desktop fs-mobile\">${text}</p>`}
      commonStyle={{
        margin: {
          bottom: 20,
        },
      }}
    />
  );
  const getListItemIconEditor = (iconName: string, text: string) => (
    <Element
      canvas
      is={ListItemEditorV2}
      commonStyle={{
        margin: {
          bottom: 8,
        },
        alignItems: 'center',
      }}
      iconConfig={{ spacing: 8 }}
      iconStyle={{ alignItems: 'center' }}
    >
      <ListItemIconEditorV2
        commonStyle={{
          margin: {
            right: 8,
          },
        }}
        position={Position.front}
        icon={{
          name: iconName,
          size: 24,
          color: '#000',
        }}
      />
      <ListItemContentEditorV2
        text={`<p style=\"text-align: justify\">${text}</p>`}
      />
    </Element>
  );
  const getFormEditor = () => (
    <Element
      canvas
      is={FormV4Editor}
      formStyle={{
        flexDirection: 'column',
        gap: 8,
        margin: {
          bottom: 20,
        },
        rowGap: 12,
      }}
      inputStyle={{
        borderRadius: 4,
      }}
      showLabel
      inputs={[
        {
          type: 'text',
          label: t('Email của bạn'),
          required: true,
          name: 'email',
          commonStyle: {
            height: 32,
            width: '100%',
          },
          placeholder: t('Nhập email của bạn'),
        },
      ]}
      submits={[]}
      hiddenFields={[]}
      response={{
        custom: [],
      }}
    >
      <ButtonSubmitV3Editor
        commonStyle={{
          justifyContent: 'flex-start',
        }}
        text={`<p>${t('Gửi')}</p>`}
        buttonStyle={{
          borderRadius: 999,
          color: 'rgba(255, 255, 255, 1)',
          height: 32,
          width: 80,
          background: 'rgba(115,103,240,1)',
        }}
        iconConfig={{
          position: 'right',
          spacing: 8,
          show: true,
          icon: {
            name: 'DirectionAlternativeOutlined',
            size: 20,
          },
        }}
      />
    </Element>
  );
  const getScoialIconEditor = () => (
    <SocialIconEditor
      commonStyle={{
        gap: 10,
        margin: {
          bottom: 20,
        },
      }}
      icons={[
        {
          name: 'facebook',
        },
        {
          name: 'youtube',
        },
        {
          name: 'tiktok',
        },
        {
          name: 'instagram',
        },
        {
          name: 'zalo',
        },
        {
          name: 'twitter',
        },
      ]}
      iconStyle={{
        width: 30,
      }}
      iconSize={21}
    />
  );
  const BCT_LOGO_IMAGE_URL = `https://lh3.googleusercontent.com/9bylrBU28f6FsaNPYZowE-eu0PkLiBxHwZ8pNt89buj0st60TbFYJLsQgtep6x8ZTe3_lQRZV5fUCsMVibF-G4A8OaNffQE`;
  const getLogoEditor = () => (
    <ImageEditor
      commonStyle={{
        width: 200,
        widthUnit: UnitEnum.pixel,
        borderRadius: 0,
        heightUnit: UnitEnum.pixel,
      }}
      src={BCT_LOGO_IMAGE_URL}
      googleImageParams={{
        width: 600,
      }}
      alignment="left"
      event={{
        eventType: 'link',
        link: {
          href: '',
        },
      }}
    />
  );
  return (
    <Element canvas is={WebsiteFooterEditor}>
      <Element canvas is={RowEditor}>
        <Element canvas is={ColEditor} {...getColWidthProps(4)}>
          {getTitleEditor(t('CÔNG TY CỔ PHẦN ABC'))}
          {getTextEditor(
            t(
              'Mã số thuế: 123456789 do Sở Kế hoạch và Đầu tư Thành phố ABC cấp ngày 01/01/2020',
            ),
          )}
          $
          {getListItemIconEditor(
            'HomepageAlternativeOutlined',
            t('Đường ..., Phường ..., Quận ..., Thành phố ...'),
          )}
          {getListItemIconEditor('MailOutlined', 'abc@example.com')}
          {getListItemIconEditor('PhoneOutlined', '0987654321')}
          {getListItemIconEditor('PrinterOutlined', '+84 24 9999 9999')}
        </Element>
        <Element canvas is={ColEditor} {...getColWidthProps(4)}>
          {getTitleEditor(t('HƯỚNG DẪN MUA HÀNG'))}
          {getTextEditor(t('Hướng dẫn mua hàng'))}
          {getTextEditor(t('Khu vực giao hàng'))}
          {getTextEditor(t('Phương thức thanh toán'))}
          {getTextEditor(t('Chính sách trả hàng và hoàn tiền'))}
          {getTextEditor(t('Chính sách bảo mật thông tin'))}
        </Element>
        <Element canvas is={ColEditor} {...getColWidthProps(4)}>
          {getTitleEditor(t('ĐĂNG KÝ NHẬN TIN'))}
          {getFormEditor()}
          {getScoialIconEditor()}
          {getLogoEditor()}
        </Element>
      </Element>
    </Element>
  );
};