import "./SelectContentTypeModal.scss";
import Modal from "components/Modal";
import React, { useState } from "react";
import { Button, Col, Row } from "antd";
import { Text } from "components/Typography";
import { EXPERIENCE_TYPE } from "redux/Experience/types";

import classNames from "classnames";
import { MusicReleaseType } from "@komi-app/shared-types";

export type SelectContentItem = {
  name: EXPERIENCE_TYPE | MusicReleaseType;
  title: string;
  description: string;
  icon: React.ReactElement;
};
interface SelectContentTypeModalProps {
  defaultValue: any;
  types: SelectContentItem[];
  show: boolean;
  toggleModal: (value: boolean) => void;
  handleSubmit: (type: any) => void;
}

const SelectContentTypeModal: React.FC<SelectContentTypeModalProps> = ({
  defaultValue,
  show,
  toggleModal,
  handleSubmit,
  types,
}) => {
  const [contentType, setContentType] = useState(() => defaultValue);

  const handleContinue = async () => {
    handleSubmit(contentType);
  };

  const classContentWrapper = classNames({
    "select-content-type__wrapper": true,
    "select-content-type__wrapper--content": !!contentType,
  });

  return (
    <React.Fragment>
      <Modal
        destroyOnClose
        className="select-content-type"
        data-testid="select-content-type"
        visible={show}
        onCancel={() => toggleModal(false)}
        title="Select Link Type"
        width={965}
      >
        <div className={classContentWrapper}>
          <div className="select-content-type__content--type">
            <Row justify="center" gutter={[16, 16]}>
              {types.map((type, index) => (
                <Col
                  key={index}
                  xs={24}
                  md={8}
                  onClick={() => setContentType(type.name)}
                >
                  <div
                    role="content-type--item"
                    className={
                      contentType === type.name
                        ? "select-content-type__content--type__item select-content-type__content--type__item--active"
                        : "select-content-type__content--type__item"
                    }
                  >
                    <Row className="select-content-type__content--type__item--content">
                      <Col className="select-content-type__content-icon">
                        {type.icon}
                      </Col>
                      <Col>
                        <Text
                          preset="semibold18"
                          className="d--block m__t--6 m__b--4 leading-22"
                        >
                          {type.title}
                        </Text>
                        <Text className="select-content-type__content--type__item__desc">
                          {type.description}
                        </Text>
                      </Col>
                    </Row>
                  </div>
                </Col>
              ))}
            </Row>

            <Row
              className="select-content-type__controls"
              align="middle"
              justify="end"
            >
              <Col>
                <Button
                  block
                  role="cancel"
                  onClick={() => toggleModal(false)}
                  className="ant-btn-xl ant-btn-uppercase btn-continue"
                >
                  Cancel
                </Button>
              </Col>

              <Col>
                <Button
                  type="primary"
                  block
                  role="next"
                  className="ant-btn-xl ant-btn-uppercase btn-continue"
                  onClick={handleContinue}
                >
                  NEXT
                </Button>
              </Col>
            </Row>
          </div>
        </div>
      </Modal>
    </React.Fragment>
  );
};

export default SelectContentTypeModal;
