import os, glob, json
import ipywidgets as widgets
from ipywidgets import Button, AppLayout, Layout
%matplotlib inline

# list 내의 값을 무한 반복 시키기 위한 cycle_list 클래스
class cycle_list():
    def __init__(self, values):
        self.values = values
        self.max_idx = len(values)-1
        self.curr_idx = 0
    
    def next(self):
        if self.curr_idx == self.max_idx:
            self.curr_idx = 0
        else:
            self.curr_idx += 1
        return self.values[self.curr_idx]

    def prev(self):
        if self.curr_idx == 0:
            self.curr_idx = self.max_idx
        else:
            self.curr_idx -= 1
        return self.values[self.curr_idx]

# Image_Viewer 앱
def Image_Viewer(root_path):
	# Header 내용
	header = widgets.HTML("<h1>Image Viewer</h1>", layout=Layout(height="auto"))

	# Next, Prev 버튼 
    prev_button = widgets.Button(
        description="Prev", icon="backward", layout=Layout(width="80%", height="30%")
    )
    
    next_button = widgets.Button(
        description="Next", icon="forward", layout=Layout(width="80%", height="30%")
    )

    # 이미지 읽기
    img_file_list = glob.glob(os.path.join(root_path, '*.jpeg'))

    images = cycle_list(img_file_list)

    image = widgets.Image(
        value=open(img_file_list[0], "rb").read(),
        format="jpeg",
        width="50%",
        height="50%",
    )

    # Footer 내용.
    footer = widgets.HTML(f"<h4>{img_file_list[0]}</h4>", layout=Layout(height="auto"))

	# Button Action을 위한 함수 구성.
    def update_image(filename: str):
        with open(filename, "rb") as f:
            image.value = f.read()
    
    def update_footer(filename: str):
        footer.value = f"<h4>{filename}</h4>"

    def update_widgets(filename: str):
        update_image(filename)
        update_footer(filename)
              
    def handle_next(button):
        update_widgets(images.next())
                
    def handle_prev(button):
        update_widgets(images.prev())

    prev_button.on_click(handle_prev)
    next_button.on_click(handle_next) 
    
    app = AppLayout(
        header=header,
        left_sidebar=prev_button,
        center=image,
        right_sidebar=next_button,
        footer=footer,
        justify_content="center",
        align_items="center",
        pane_heights = (50, 500, 50),
        pane_widths = (100, 300, 100)
    )
    
    return app


root_path = './imgs'
Image_Viewer(root_path)