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

import { GivingEmoticonState } from '@pages/emoticons/givingEmoticons/GivingEmoticons';

import styles from './EmoticonTable.module.scss';
import { EmoticonListRequest, EmoticonListResponse } from '@api/emoticonAPI';
import { Page } from 'src/services/commonResponse/PageResponse';
import Button from '@components/ui/button/Button';
import Pagination from '@components/ui/pagination/Pagination';

const cn = classNames.bind(styles);

interface Props {
  emoticonListData: Page<EmoticonListResponse> | undefined;
  emoticonListRequest: EmoticonListRequest;
  btnName?: 'Edit' | 'Gift';
  onModalClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
  setEmoticonListRequest: React.Dispatch<React.SetStateAction<EmoticonListRequest>>;
  setEmoticonState?: React.Dispatch<React.SetStateAction<GivingEmoticonState>>;
}

const EmoticonTable = ({
  emoticonListData,
  onModalClick,
  btnName = 'Edit',
  emoticonListRequest,
  setEmoticonListRequest,
  setEmoticonState
}: Props) => {
  if (!emoticonListData || emoticonListData.content.length === 0) {
    return <div>No emoticonListData available</div>;
  }
  return (
    <div className={cn('emoticon_list_table')}>
      <table>
        <thead>
          <tr>
            <th className="width-18">Emoticon</th>
            <th className="width-18">Emoticon Name</th>
            <th className="width-18">Guid</th>
            <th className="width-18">Price</th>
            <th className="width-18">Registration Date</th>
            <th className="width-18"></th>
          </tr>
        </thead>
        <tbody>
          {emoticonListData?.content.map((item, idx: number) => (
            <tr key={idx}>
              <td className="width-18">
                <div className={cn('gift_emoticon_box')}>
                  <img src={item.absFilePath} alt={item.emotiName} />
                </div>
              </td>
              <td className="width-18">{item.emotiName}</td>
              <td className="width-18">{item.guid}</td>
              <td className="width-18">{item.price}</td>
              <td className="width-18">{item.regDt}</td>
              <td className="width-18">
                <Button
                  size="sm"
                  color="rounded"
                  value={item.guid}
                  name={item.emotiName}
                  onClick={(e) => {
                    onModalClick(e);
                    setEmoticonState?.({ guid: item.guid, emoticonName: item.emotiName });
                  }}
                >
                  {btnName === 'Edit' ? 'Edit' : 'Gift'}
                </Button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="list_footer">
        <Pagination
          totalItems={emoticonListData?.totalElements ?? 0}
          itemsPerPage={emoticonListRequest.size}
          currentPage={emoticonListRequest.page}
          onPaginate={(pageNumber: number) =>
            setEmoticonListRequest((prevState) => ({ ...prevState, page: pageNumber }))
          }
        />
      </div>
    </div>
  );
};

export default EmoticonTable;