import React from 'react';
import {
  Box,
  Cell,
  FormField,
  InfoIcon,
  Text,
  TextButton,
  ToggleSwitch,
} from '@wix/design-system';
import { Trans } from '../Trans';

interface PiiFormFieldsProps {
  containsPii: {
    value: boolean;
    onChange: (value: boolean) => void;
  };
  mode: string;
  language: string;
}

export function PiiFormFields({
  containsPii,
  mode,
  language,
}: PiiFormFieldsProps) {
  const translateKeys = {
    toggleName:
      'cairo.customFields.addCustomField.modal.PII-setting.toggle.name',
    toggleInfo:
      'cairo.customFields.addCustomField.modal.PII-setting.toggle.info',
    toggleEditNote:
      'cairo.customFields.addCustomField.modal.PII-setting.toggle.editNote',
  } as const;
  const whyIsItImportantLink = `https://support.wix.com/${language}/article/about-personally-identifiable-information-pii`;

  return (
    <Cell span={12}>
      <FormField>
        <Box gap="SP1" marginBlockEnd="6px">
          <ToggleSwitch
            dataHook="pii-toggle-switch"
            size="small"
            disabled={mode === 'edit'}
            checked={containsPii.value}
            onChange={(e) => containsPii.onChange(e.target.checked)}
          />
          <Text size="small" dataHook="pii-toggle-name">
            <Trans i18nKey={translateKeys.toggleName} />
          </Text>
          <InfoIcon
            size="small"
            content={
              <Trans
                i18nKey={translateKeys.toggleInfo}
                components={{
                  linkVal: (
                    <TextButton
                      as="a"
                      href={whyIsItImportantLink}
                      underline="always"
                      size="small"
                      target="_blank"
                    />
                  ),
                }}
              />
            }
          />
        </Box>
      </FormField>
      <Box>
        <Text size="small" dataHook="pii-toggle-edit-note">
          <Trans i18nKey={translateKeys.toggleEditNote} />
        </Text>
      </Box>
    </Cell>
  );
}