import { SocialIcon, SocialLinkType } from "@komi-app/creator-ui";
import {
  FLAGS,
  IfFeatureDisabled,
  IfFeatureEnabled,
  useFeatureIsOn,
} from "@komi-app/flags-sdk";
import { Button, Form, Input, Row } from "antd";
import { useForm } from "antd/lib/form/Form";
import { useCallback, useEffect } from "react";
import { SocialProfileLinkItem } from "../../redux/User/types";
import { Icon, IconName } from "../Icon";
import Modal from "../Modal";
import { Text } from "../Typography";
interface EditorSocialLinkModalProps {
  visible?: boolean;
  item?: SocialProfileLinkItem;
  onClose?: () => void;
  onSubmit?: (item: SocialProfileLinkItem) => void;
}

const EditorSocialLinkModal = ({
  visible,
  item,
  onClose,
  onSubmit,
}: EditorSocialLinkModalProps) => {
  const isSocialLinksTypeFixEnabled = useFeatureIsOn(
    FLAGS.FEAT_SB_328_ONBOARDING_USERNAME_DISABLE_AUTOCOMPLETE_AUTOCAPITALISE
  );
  const [form] = useForm();
  useEffect(() => {
    if (item) {
      form.setFieldsValue({ [item.key]: item.value });
    }
  }, [item]);
  const handleChange = useCallback(
    (event) => {
      if (!item) {
        return;
      }

      const text = event.target.value;
      if (item.key !== "EMAIL") {
        const regex = /^(https?|ftp):\/\//i;
        if (
          !regex.test(text) &&
          ("https://".includes(text) || "http://".includes(text))
        ) {
          form.setFieldsValue({ [item.key]: text });

          return;
        }
        if (!regex.test(text) && text.trim().length) {
          form.setFieldsValue({ [item.key]: "https://" + text });
          return;
        }
      }
      form.setFieldsValue({ text });
    },
    [form, item]
  );
  const handleClose = () => {
    form.resetFields();
    onClose?.();
  };
  const handleSubmit = useCallback(
    (values) => {
      if (!item) {
        return;
      }
      const newItem = { ...item, value: values[item?.key] };
      onSubmit?.(newItem);
    },
    [item, onSubmit]
  );
  return (
    <Modal
      width={664}
      title={"Edit Social Link"}
      visible={visible}
      zIndex={200}
      onCancel={handleClose}
      maskClosable={false}
      centered
    >
      <div>
        <Form
          labelCol={{
            span: 24,
          }}
          wrapperCol={{
            span: 24,
          }}
          form={form}
          hideRequiredMark
          onFinish={handleSubmit}
          noValidate={isSocialLinksTypeFixEnabled}
        >
          {item ? (
            <>
              <div>
                <Row>
                  <IfFeatureEnabled
                    feature={FLAGS.FEAT_SB_186_ADDITIONAL_SOCIAL_LINKS}
                  >
                    <SocialIcon
                      social={item.key as SocialLinkType}
                      mode="color"
                    />
                  </IfFeatureEnabled>
                  <IfFeatureDisabled
                    feature={FLAGS.FEAT_SB_186_ADDITIONAL_SOCIAL_LINKS}
                  >
                    <Icon name={(item?.icon as IconName) || "apple-music"} />
                  </IfFeatureDisabled>

                  <Text
                    className="m__l--10"
                    ellipsis={true}
                    preset="semibold16"
                  >
                    {item?.name || ""}
                  </Text>
                </Row>
                <Form.Item
                  rules={[
                    {
                      required: true,
                      message: "Please enter this field",
                    },
                    item.key === "EMAIL"
                      ? {
                          type: "email",
                          message: "Please enter a valid email",
                        }
                      : {
                          type: "url",
                          message: "Please enter a valid link",
                        },
                  ]}
                  name={item?.key}
                  className={"m__t--12 m__b--20"}
                >
                  <Input
                    autoFocus
                    onChange={handleChange}
                    placeholder={
                      item.key === "EMAIL"
                        ? "Enter your email address"
                        : "https://"
                    }
                    type={
                      isSocialLinksTypeFixEnabled
                        ? item.key === "EMAIL"
                          ? "email"
                          : "url"
                        : undefined
                    }
                    className="height--52"
                  />
                </Form.Item>
              </div>

              <div
                className="profile-smart-link__actions m__t--32"
                style={{ textAlign: "end" }}
              >
                <Button
                  className="ant-btn-xl ant-btn-uppercase m__r--10"
                  onClick={handleClose}
                >
                  Cancel
                </Button>
                <Button
                  className="ant-btn-xl ant-btn-uppercase"
                  htmlType="submit"
                  size="large"
                  type="primary"
                >
                  Save
                </Button>
              </div>
            </>
          ) : (
            <div />
          )}
        </Form>
      </div>
    </Modal>
  );
};

export default EditorSocialLinkModal;
