Scenario: 선택칸의 가로 길이를 마음대로 늘리거나 줄일 수 있다
  Given 선택칸을 렌더하고
  When 원하는 칸을 선택해서 잡아당기면
  Then 선택칸을 줄이거나 늘일 수 있다

//먼저 react-table에서 쓸 것들을 import해준다.
import { useTable, useBlockLayout, useResizeColumns } from 'react-table'

function Table({ columns, data }) {
  //기본 column의 크기를 지정해주는 곳. 나중에 이걸 바꾸고 싶었지만 아직 어떻게 바꿀지 모르겠다.
  const defaultColumn = React.useMemo(
    () => ({
      minWidth: 30,
      width: 150,
      maxWidth: 400,
    }),
    []
  )

//우리가 필요한 부분은 getTableProps,headerGroups,rows,prepareRow이다.
//처음엔 getTableBodyProps를 두고 headerGroups를 없앴는데, column의 가로 폭을 조절하는 것이
//header 부분에서 가능한 걸 알고 headerGroups를 놔두기로 했다.
const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  prepareRow,
  state,
  resetResizing,
} = useTable(
  {
    columns,
    // 여기의 column들이 우리가 바꿀 가로폭들을 지칭한다.
    data,
    // 여기의 data가 각 column에 들어가는 컬러 코드 값들을 의미한다.
    defaultColumn,
  },
  useBlockLayout,
  useResizeColumns
)

return (
  <>
    <button onClick={resetResizing}>Reset Resizing</button>
    <div>
      <div {...getTableProps()} className="table">
        <div>
          {headerGroups.map((headerGroup) => (
            <div {...headerGroup.getHeaderGroupProps()} className="tr">
              {headerGroup.headers.map((column) => (
                <div {...column.getHeaderProps()} className="th">
                  {column.render('Header')}
                  {/* Use column.getResizerProps to hook up the events correctly */}
                  <div
                    {...column.getResizerProps()}
                    className={`resizer ${column.isResizing ? 'isResizing' : ''}`}
                  />
                </div>
              ))}
            </div>
          ))}
        </div>

        <div {...getTableBodyProps()}>
          {rows.map((row, i) => {
            prepareRow(row)
            return (
              <div {...row.getRowProps()} className="tr">
                {row.cells.map((cell) => {
                  return (
                    <div {...cell.getCellProps()} className="td">
                      {cell.render('Cell')}
                    </div>
                  )
                })}
              </div>
            )
          })}
        </div>
      </div>
    </div>
    <pre>
      <code>{JSON.stringify(state, null, 2)}</code>
    </pre>
  </>
)
}

function App() {
  const columns = React.useMemo(
    () => [
      {
        Header: 'Name',
        columns: [
          {
            Header: 'First Name',
            accessor: 'firstName',
          },
          {
            Header: 'Last Name',
            accessor: 'lastName',
          },
        ],
      },
      {
        Header: 'Info',
        columns: [
          {
            Header: 'Age',
            accessor: 'age',
            width: 50,
          },
          {
            Header: 'Visits',
            accessor: 'visits',
            width: 60,
          },
          {
            Header: 'Status',
            accessor: 'status',
          },
          {
            Header: 'Profile Progress',
            accessor: 'progress',
          },
        ],
      },
    ],
    []
  )

  const data = React.useMemo(() => makeData(10), [])

  return (
    <Styles>
      <Table columns={columns} data={data} />
    </Styles>
  )
}

export default App

const columns = Array.from({ length: BOX_COUNT }, (_, i) => {
  return {
    Header: `Column ${i}`,
    accessor: i.toString(),
  }
})
console.log(columns)

// 이 모양을 어떻게 data에 맞게 변형할까? map과 fromEntries를 활용했다
// input: colors ["#ffffff","#ffffff","#ffffff","#ffffff", ...,"#ffffff"]

const entries = colors.map((v, i) => [i.toString(), v])
console.log('entries', entries)

const row = Object.fromEntries(entries)
console.log('row', row)

const {
  getTableProps,
  headerGroups,
  rows,
  prepareRow,
  // getTableBodyProps,
  // state,
  // resetResizing,
} = useTable(
  {
    columns,
    data: [row],
    defaultColumn,
  },
  useBlockLayout,
  useResizeColumns
)

return (
    <Tooltip.Provider delayDuration={800} skipDelayDuration={500}>
      <input type="text" name="colors" value={JSON.stringify(colors)} hidden />
      <table
        className="selectedContainer flex flex-col max-w-full"
        {...getTableProps()}
      >
        {/* 2번 - map을 써서 배열의 값을 화면에 뿌려준다. */}
        {/* https://beta.reactjs.org/learn/rendering-lists */}
        <thead>
          {headerGroups.map((headerGroup) => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column) => (
                <th {...column.getHeaderProps()}>
                  {column.id}
                  <div
                    {...(column as any).getResizerProps()}
                    className={`resizer ${
                      (column as any).isResizing ? "isResizing" : ""
                    }`}
                  />
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody className="flex flex-row">
          {rows.map((row) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  return (
                    <td
                      {...cell.getCellProps()}
                      onClick={() => deleteSelected(parseInt(cell.column.id))}
                      style={{
                        backgroundColor: cell.value,
                        width: cell.column.width,
                      }}
                    >
                      {cell.value}
                    </td>
                  );
                })}
              </tr>
            );
          })}
        </tbody>
      </table>

<table
        className="selectedContainer flex flex-col max-w-full"
        {...getTableProps()}
      >

<thead>
  //headerGroup은 headerGroup을 map을 하는데
  {headerGroups.map((headerGroup) => (
    //tr에 getHeaderGroupProps를 나열한다.
    <tr {...headerGroup.getHeaderGroupProps()}>
      //headerGroup.headers은 column을 map으로 나열하는데
      {headerGroup.headers.map((column) => (
        //th에 column의 getHeaderProps를 나열해 넣어준다.
        <th {...column.getHeaderProps()}>
          //column.id는 컬럼의 인덱스값으로 이 값을 객체로 넣어주어 나열한다.
          {column.id}
          //이 div은 getResizerProps함수를 통한 값을 나열하는데, 아마도 리사이징한 값을 나열해주는
          것 같다.
          <div
            {...(column as any).getResizerProps()}
            className={`resizer ${(column as any).isResizing ? 'isResizing' : ''}`}
          />
        </th>
      ))}
    </tr>
  ))}
</thead>

<tbody className="flex flex-row">
  //rows를 map으로 나열해주는데
  {rows.map((row) => {
    //일단 초기상태의 row를 prepareRow로 return해주고
    prepareRow(row)
    return (
      //색깔을 선택해서 값이 바뀌면 getRowProps의 값을 나열해주는 거 같다.
      <tr {...row.getRowProps()}>
        {row.cells.map((cell) => {
          return (
            <td
              {...cell.getCellProps()}
              //만약 이미 선택된 색을 지우려고 하면 해당 칸의 id인 index를 string에서 int로 바꾸어 삭제해준다.
              onClick={() => deleteSelected(parseInt(cell.column.id))}
              style={{
                //스타일에 배경에는 선택한 cell의 색인 value를 넣어주고
                //width에는 header에서 내려온 column의 width가 동일하게 적용되도록 한다.
                backgroundColor: cell.value,
                width: cell.column.width,
              }}
            >
              //선택된 색깔 칸에는 해당 색 코드도 string으로 나타내어준다.
              {cell.value}
            </td>
          )
        })}
      </tr>
    )
  })}
</tbody>