/* eslint-disable react/no-danger */

import FormItem from "@/components/form/form-item";
import { Tooltip } from "@/components/ui/tooltip/tooltip";
import PolicyCheck from "@/components/widget/policy-check/policy-check";

interface CoreSummaryPolicyFormItemProps {
  kvkkAgreementText: string;
}

const CoreSummaryPolicyFormItem = (props: CoreSummaryPolicyFormItemProps) => {
  return (
    <FormItem
      name="kvkk"
      rules={{
        required: {
          value: true,
          message: "İşlemi tamamlamak için önce onay vermelisiniz.",
        },
      }}
    >
      {({ field, fieldState, setValue }) => (
        <div>
          <PolicyCheck
            value={field.value}
            onChange={setValue}
            renderModalItem={() => (
              <div
                dangerouslySetInnerHTML={{
                  __html: props.kvkkAgreementText,
                }}
              />
            )}
            renderLabelItem={({ toggleModal }) => (
              <PolicyCheck.KvkkLabel onClick={toggleModal} />
            )}
          />
          {fieldState.error && (
            <Tooltip
              position="bottom"
              label={fieldState.error.message}
              isAlwaysVisible
            >
              <div className="w-[300px]" />
            </Tooltip>
          )}
        </div>
      )}
    </FormItem>
  );
};

export default CoreSummaryPolicyFormItem;