import type { ICellRendererParams } from '@ag-grid-community/core';

import { RiPlayFill } from 'react-icons/ri';

import { Text } from '/@/renderer/components/text';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';

// const AnimatedSvg = () => {
//     return (
//         <div style={{ height: '1rem', transform: 'rotate(180deg)', width: '1rem' }}>
//             <svg
//                 viewBox="100 130 57 80"
//                 xmlns="http://www.w3.org/2000/svg"
//             >
//                 <g>
//                     <rect
//                         fill="var(--primary-color)"
//                         height="80"
//                         id="bar-1"
//                         width="12"
//                         x="100"
//                         y="130"
//                     >
//                         <animate
//                             attributeName="height"
//                             begin="0.1s"
//                             calcMode="spline"
//                             dur="0.95s"
//                             keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
//                             keyTimes="0; 0.47368; 1"
//                             repeatCount="indefinite"
//                             values="80;15;80"
//                         />
//                     </rect>
//                     <rect
//                         fill="var(--primary-color)"
//                         height="80"
//                         id="bar-2"
//                         width="12"
//                         x="115"
//                         y="130"
//                     >
//                         <animate
//                             attributeName="height"
//                             begin="0.1s"
//                             calcMode="spline"
//                             dur="0.95s"
//                             keySplines="0.45 0 0.55 1; 0.45 0 0.55 1"
//                             keyTimes="0; 0.44444; 1"
//                             repeatCount="indefinite"
//                             values="25;80;25"
//                         />
//                     </rect>
//                     <rect
//                         fill="var(--primary-color)"
//                         height="80"
//                         id="bar-3"
//                         width="12"
//                         x="130"
//                         y="130"
//                     >
//                         <animate
//                             attributeName="height"
//                             begin="0.1s"
//                             calcMode="spline"
//                             dur="0.85s"
//                             keySplines="0.65 0 0.35 1; 0.65 0 0.35 1"
//                             keyTimes="0; 0.42105; 1"
//                             repeatCount="indefinite"
//                             values="80;10;80"
//                         />
//                     </rect>
//                     <rect
//                         fill="var(--primary-color)"
//                         height="80"
//                         id="bar-4"
//                         width="12"
//                         x="145"
//                         y="130"
//                     >
//                         <animate
//                             attributeName="height"
//                             begin="0.1s"
//                             calcMode="spline"
//                             dur="1.05s"
//                             keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
//                             keyTimes="0; 0.31579; 1"
//                             repeatCount="indefinite"
//                             values="30;80;30"
//                         />
//                     </rect>
//                 </g>
//             </svg>
//         </div>
//     );
// };

// const StaticSvg = () => {
//     return (
//         <div style={{ height: '1rem', transform: 'rotate(180deg)', width: '1rem' }}>
//             <svg
//                 viewBox="100 130 57 80"
//                 xmlns="http://www.w3.org/2000/svg"
//             >
//                 <rect
//                     fill="var(--primary-color)"
//                     height="20"
//                     width="12"
//                     x="100"
//                     y="130"
//                 />
//                 <rect
//                     fill="var(--primary-color)"
//                     height="60"
//                     width="12"
//                     x="115"
//                     y="130"
//                 />
//                 <rect
//                     fill="var(--primary-color)"
//                     height="80"
//                     width="12"
//                     x="130"
//                     y="130"
//                 />
//                 <rect
//                     fill="var(--primary-color)"
//                     height="45"
//                     width="12"
//                     x="145"
//                     y="130"
//                 />
//             </svg>
//         </div>
//     );
// };

export const RowIndexCell = ({ eGridCell, value }: ICellRendererParams) => {
    const classList = eGridCell.classList;
    // const isFocused = classList.contains('focused');
    const isPlaying = classList.contains('playing');
    const isCurrentSong =
        classList.contains('current-song-cell') || classList.contains('current-playlist-song-cell');

    return (
        <CellContainer $position="right">
            {isPlaying &&
                (isCurrentSong ? (
                    <RiPlayFill
                        color="var(--primary-color)"
                        size="1.2rem"
                    />
                ) : null)}
            <Text
                $secondary
                align="right"
                className="current-song-child current-song-index"
                overflow="hidden"
                size="md"
            >
                {value}
            </Text>
        </CellContainer>
    );
};