import React from 'react';
import classNames from 'classnames/bind';

import styles from './SortButton.module.scss';
import SortDown from '@styles/images/icons/ic-arrow-down.svg';
import SortUp from '@styles/images/icons/ic-arrow-up.svg';

const cn = classNames.bind(styles);

interface Props {
  label: string;
  column: string;
  onClick: React.MouseEventHandler<HTMLButtonElement>;
  dataList: {
    content: object[];
  } | null;
  sortRequest: {
    sort: string[];
  };
}

const SortButton = ({ label, column, onClick, dataList, sortRequest }: Props) => {
  const isSortActive = sortRequest.sort[0] && sortRequest.sort[0].startsWith(column);
  const isAscending = sortRequest.sort[0] === `${column},asc`;

  return (
    <button className={cn('btn_sort')} onClick={onClick} disabled={dataList?.content.length === 0}>
      {label}
      {isSortActive ? (
        <i className={cn('arrow')}>
          <img src={isAscending ? SortUp : SortDown} alt="arrow_icon" />
        </i>
      ) : (
        <i className={cn('arrow', 'default_arrow')}>
          <img src={SortUp} alt="arrow_icon" />
          <img src={SortDown} alt="arrow_icon" />
        </i>
      )}
    </button>
  );
};

export default SortButton;