import './App.css'
import { AnnoymousNickNameProvider } from './AuthorData';
import { CommentInput, CommentItem, CommentListContainer, CommentPagination, PostListControls, SubCommentData } from './Comment';
import CommentHeader from './CommentHeader';
import { Footer } from './Footer';
import { GalleryContent, GalleryContentHeader } from './Gallery';
import { GalleryTitleHeader } from './GalleryTitleHeader';
import { GlobalNavigationBar, Header, VisitHistory } from './Header';
import { LoginBox } from './Sidebar';
import { GalleryTable, TableRowData } from './table';


const tableData: TableRowData[] = [
  { // Survey Example
    id: 2995,
    category: "설문",
    titleText: "어떤 상황이 와도 가족 안 굶길 것 같은 생활력 강해 보이는 스타는?",
    variant: "icon_survey",
    author: {
      type: "operator",
    },
    date: "25.03.24",
    views: "-",
    recommendations: "-",
    isAdOrSurvey: true,
  },
  { // AD Example
    id: 2996,
    category: "AD",
    titleText: "트릭컬 지금 접속 시 죠안 확정권 지급",
    variant: "icon_ad",
    author: {
      type: "operator",
    },
    date: "25.03.28",
    views: "-",
    recommendations: "-",
    isAdOrSurvey: true,
  },
  { // Notice Example 1
    id: 1012381,
    category: "공지",
    titleText: "3월 5주차 주던",
    commentCount: 7,
    variant: "icon_notice",
    author: {
      type: "nickname",
      nickname: "보배단",
      userType: "manager", // Optional, if applicable
    },
    date: "25.03.27",
    views: 3178,
    recommendations: 12,
    isNotice: true,
  },
  { // Notice Example 2
    id: 784571,
    category: "공지",
    titleText: "인방 떡밥은 별도의 갤러리를 이용해주세요",
    commentCount: 3,
    variant: "icon_notice",
    author: {
      type: "nickname",
      nickname: "ㅇㅇ",
      userType: "submanager", // Optional, if applicable
    },
    date: "25.03.08",
    views: 7018,
    recommendations: 6,
    isNotice: true,
  },
  { // Normal Row Example 1
    id: 1040045,
    category: "일반",
    titleText: "버서커 헬 졸업해도되는데 태초한번도 안떠서 계속 돌림",
    variant: "icon_pic",
    commentCount: 2,
    author: {
      type: "nickname",
      nickname: "븜구리",
      userType: "manager", // Optional, if applicable
    },
    date: "21:58",
    views: 4,
    recommendations: 0,
  },
  { // Normal Row Example 2 (IP Author)
    id: 1040043,
    category: "일반",
    titleText: "혹시 엘마가 진각무기압타 빗자루 쓸 수 있음?",
    variant: "icon_txt",
    author: {
      type: "IP",
      ip: "1.248",
    },
    date: "21:58",
    views: 1,
    recommendations: 0,
  },
  // ... Add all other rows from the original HTML here
  { // News Row Example
    id: '', // No ID
    category: "뉴스",
    titleText: "'2025 조치원 봄꽃축제' 개최 소식 밝혀",
    variant: "icon_dctrend",
    date: "18:00",
    views: "",
    recommendations: "",
    isNews: true,
  },
];


// Sample data - replace with your actual data source/props
const comments: SubCommentData[] = [
  {
    id: 1,
    author: { type: 'IP', ip: '222.116' }, // Assuming author is an object with type and name
    text: '너 지금 상현이햄을 ■■라고',
    timestamp: '03.31 17:44:25',
    showDelete: true,
  },
  {
    id: 2,

    author: { type: "IP", ip: "218.144" },
    text: '미국인들도 저사람 얘기할때마다 동양인이 어쩌고랑 엮는데 왤케화남ㅋㅋ',
    timestamp: '03.31 18:16:45',
    showDelete: true,
  },
  {
    id: 3,

    author: { type: "IP", ip: "183.96" },

    text: '다른 나라랑 다르게 미국에선 ~계 미국인이라는 정체성이 확고하고 사회적인 인식도 그럼',
    timestamp: '03.31 18:18:40',
    showDelete: true,
  },
  {
    id: 4,
    author: { type: "semi-nickname", nickname: "ㅇㅇ" },
    text: '이새낀 미국을 모르노 ㅋㅋㅋㅋ',
    timestamp: '03.31 20:34:54',
    showDelete: false, // No delete button in this example
  },
  {
    id: 5,
    author: { type: "semi-nickname", nickname: "ㅇㅇ" },
    text: '어어 내려놔라',
    timestamp: '03.31 21:16:46',
    showDelete: false,
  },
  {
    id: 6,
    author: { type: "nickname", nickname: '티르칸쟈카' },
    text: '원종원종아...',
    timestamp: '03.31 21:23:59',
    showDelete: false,
  },
  // Add more comment objects as needed
];


function App() {
  return (
    <AnnoymousNickNameProvider value="썬갤러">
      <div>
        <Header />
        <GlobalNavigationBar />
        <VisitHistory recentVisits={[
          {
            id: 1,
            name: "워썬더",
            isMinor: true,
          },
          {
            id: 2,
            name: "배틀그라운드",
            isMinor: false,
          },
          {
            id: 3,
            name: "리그오브레전드",
            isMinor: false,
          },
          {
            id: 4,
            name: "발로란트",
            isMinor: false,
          },
          {
            id: 5,
            name: "오버워치",
            isMinor: true,
          }
        ]} />
        <div className='relative w-[1450px] mx-auto'>
          <main
            className='w-[1160px] m-[20px_auto_0]'
          >
            <section className='' >
              <GalleryTitleHeader title='워썬더 갤러리' />
              <div
                className='border-custom-blue-dark border w-[1158px]'
              />
              <GalleryContentHeader kind='일반'
                title={'아 e글 유파들이 고도 왜 안올리는지 알았다'}
                author={{
                  type: "IP",
                  ip: "183.96",
                }}
                date='2025.02.04 21:32:47'
                views={1234}
                recommendations={12}
                commentCount={9}
              />
              <GalleryContent />
              <CommentHeader commentCount={9} />
              <CommentListContainer>
                <CommentItem comment={{
                  id: 1,
                  author: { type: "nickname", nickname: "동아리망했다" },
                  text: '너 지금 상현이햄을 ■■라고',
                  timestamp: '03.31 17:44:25',
                  showDelete: true,
                }} />
                <CommentItem comment={{
                  id: 2,
                  author: { type: "IP", ip: "218.144" },
                  text: '그냥 미국인인데 조센징들은 왜 조선계라고 못 넣어서 안달일까',
                  timestamp: '03.31 18:16:45',
                  showDelete: true,
                  subComments: comments,
                }} />
                <CommentItem comment={{
                  id: 3,
                  author: { type: "IP", ip: "123.245" },
                  text: 'aaa',
                  timestamp: '03.31 18:16:45',
                  showDelete: true,
                }} />
              </CommentListContainer>
              <CommentPagination currentPage={1} maxPage={2} />
              <CommentInput />
              <PostListControls owner />
              <div className='flex justify-between'>
                <div style={{
                  width: "840px",
                }}>
                  <GalleryTable data={tableData} />
                  <PostListControls />
                </div>
                <div style={{
                  width: "300px",
                }}>
                  <LoginBox />
                </div>
              </div>
            </section>
          </main>
        </div>
        <Footer />
      </div >
    </AnnoymousNickNameProvider>
  )
}

export default App