import { Alert, Col, Row } from "antd";
import classNames from "classnames";
import { AntInput, FieldType } from "components/Form/FormItem";
import { Field } from "formik";
import * as React from "react";
import { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
import { addingHttpsPrefix } from "utils/string";
import DragDropButton from "../Button/DragDropButton";
import { Icon, IconName } from "../Icon";
import { Paragraph, Text } from "../Typography";
import "./PodcastFieldItem.scss";

interface PodcastFieldItemProps {
  defaultValue?: string;
  className?: string;
  title?: string;
  name?: string;
  placeholder?: string;
  isDisableDragged?: boolean;
  icon?: IconName;
  disableDrag?: boolean;
  dragHandleProps?: DraggableProvidedDragHandleProps;
  validate?: any;
  error?: any;
  rightContent?: React.ReactNode;
  rightContentClassName?: string;
  errorAlert?: string | React.ReactNode;
  onChangeText?: (value: string) => void;
}

const PodcastFieldItem = ({
  name,
  className,
  title,
  icon,
  placeholder,
  dragHandleProps,
  isDisableDragged,
  validate,
  rightContent,
  errorAlert,
  rightContentClassName,
  onChangeText,
}: PodcastFieldItemProps) => {
  return (
    <div className={classNames("podcast-item", className)}>
      <Row align="middle" wrap={false}>
        <Col flex={"1"}>
          <Row>
            <Icon name={icon || "apple-music"} />
            <Text className="m__l--10" ellipsis={true} preset="semibold16">
              {title}
            </Text>
          </Row>
        </Col>
        <Col>
          <Row gutter={8} align="middle">
            {rightContent && (
              <Col className={rightContentClassName}>{rightContent}</Col>
            )}
            <Col>
              <DragDropButton
                className="p__x--0 p__y--0"
                dragType="vertical"
                dragHandleProps={dragHandleProps}
                disabled={isDisableDragged}
                onClick={(event) => event.stopPropagation()}
              />
            </Col>
          </Row>
        </Col>
      </Row>

      <Field
        className="m__t--12"
        component={AntInput}
        name={name}
        type={FieldType.input}
        placeholder={placeholder}
        beforeSetValue={addingHttpsPrefix}
        validate={validate}
        onChangeText={onChangeText}
      />
      {errorAlert && (
        <Alert
          message={undefined}
          className={"alert-error m__t--16"}
          description={
            <Paragraph preset="regular16" className="leading-24">
              {errorAlert}
            </Paragraph>
          }
          icon={<Icon name="error" />}
          showIcon
          closable={false}
        />
      )}
    </div>
  );
};

export default React.memo(PodcastFieldItem);
