import React, { useState, useRef } from "react";
import { Card } from "antd";
import { EditAction } from "./EditAction";
import { DeleteAction } from "./DeleteAction";
import { TrackCardBody } from "./TrackCardBody";
import "./ManagedTrack.css";

const ManagedTrack = ({ initialTrack, onDeleteTrack }) => {
  const trackElement = useRef();
  const [track, setTrack] = useState(initialTrack);

  return (
    <div className="card-element" ref={trackElement}>
      <Card
        actions={[
          <DeleteAction
            ID={track.ID}
            onDeleteTrack={() => {
              trackElement.current.style.opacity = 0;
              setTimeout(() => onDeleteTrack(track.ID), 500);
            }}
          />,
          <EditAction
            ID={track.ID}
            name={track.name}
            composer={track.composer}
            album={track.album}
            genre={track.genre}
            unitPrice={track.unitPrice}
            afterTrackUpdate={(value) => setTrack(value)}
          />,
        ]}
        title={track.name}
        bordered={false}
      >
        <TrackCardBody track={track} />
      </Card>
    </div>
  );
};

export { ManagedTrack };