import { t } from '../../../../i18n';
import { Element } from '@tempi/core-editor';
import {
  getColWidthProps,
  ParagraphEditor,
  WebsiteFooterEditor,
  ColEditor,
  RowEditor,
  FormV4Editor,
  ButtonSubmitV3Editor,
  WidthTypeEnum,
} from '@tempi/core-elements';
export const getWebsiteFooter3 = () => {
  const getTitleEditor = (text: string) => (
    <ParagraphEditor
      text={`<p style=\"--fontSizeDesktop: 18px; --fontSizeMobile: 14px\" class=\"fs-desktop fs-mobile\"><strong>${text}</strong></p>`}
      commonStyle={{
        margin: {
          bottom: 20,
        },
      }}
    />
  );
  const getTextEditor = (text: string, text2?: string) => (
    <ParagraphEditor
      text={`<p style=\"line-height: 25px\">${text}</p>${
        text2 ? `<p style=\"line-height: 25px\">${text2}</p>` : ''
      }`}
      commonStyle={{
        margin: {
          bottom: 5,
        },
      }}
    />
  );
  const getFormEditor = () => (
    <Element
      canvas
      is={FormV4Editor as any}
      formStyle={{
        flexDirection: 'column',
        gap: 8,
        margin: {
          top: 20,
          bottom: 20,
        },
        rowGap: 12,
      }}
      inputStyle={{
        borderRadius: 20,
      }}
      showLabel
      inputs={[
        {
          type: 'text',
          label: t('Name'),
          required: true,
          name: 'name',
          commonStyle: {
            height: 32,
            width: '100%',
          },
        },
        {
          type: 'text',
          label: t('Email'),
          name: 'email',
          commonStyle: {
            height: 32,
            width: '100%',
          },
        },
      ]}
      submits={[]}
      hiddenFields={[]}
      response={{
        custom: [],
      }}
    >
      <ButtonSubmitV3Editor
        commonStyle={{
          justifyContent: 'flex-start',
        }}
        text={`<p>${t('Submit')}</p>`}
        buttonStyle={{
          borderRadius: 999,
          backgroundColor: null,
          color: 'rgba(0,0,0,1)',
          height: 35,
          width: 160,
          background: null,
          borderStyle: 'solid',
          borderWidth: 1,
          borderColor: 'rgba(0,0,0,1)',
        }}
      />
    </Element>
  );
  return (
    <Element canvas is={WebsiteFooterEditor}>
      <Element
        canvas
        is={RowEditor}
        row={{ commonStyle: { maxWidth: 1404 } }}
        widthType={WidthTypeEnum.full}
      >
        <Element canvas is={ColEditor} {...getColWidthProps(2.9)}>
          {getTitleEditor(t('Contact'))}
          {getTextEditor(
            '350 Fifth Avenue, Suite 4400',
            'New York, NY 10118, United States',
          )}
          {getTextEditor('info@mysite.com')}
          {getTextEditor('123-456-7890')}
        </Element>
        <Element
          canvas
          is={ColEditor}
          {...getColWidthProps(4)}
          commonStyle={{ padding: { right: 90 } }}
        >
          {getTitleEditor(t('Be in the know'))}
          {getTextEditor(
            'This is an example paragraph. You can replace the content here. Let your users get to know you.',
          )}
          {getFormEditor()}
        </Element>
        <Element canvas is={ColEditor} {...getColWidthProps(2.2)}>
          {getTitleEditor('Menu')}
          {getTextEditor('Home')}
          {getTextEditor('About us')}
          {getTextEditor('Services')}
          {getTextEditor('Contact')}
          {getTextEditor('FAQ')}
        </Element>
        <Element canvas is={ColEditor} {...getColWidthProps(2.9)}>
          {getTitleEditor('Follow us on')}
          {getTextEditor('Facebook')}
          {getTextEditor('Linkedin')}
          {getTextEditor('Twitter')}
          {getTextEditor('Youtube')}
        </Element>
      </Element>
    </Element>
  );
};