import React, { Fragment, useState, useEffect } from 'react';
import { ActivityIndicator } from 'react-native';
import session from '~/Utils/session';
import fetchGet, { fetchPost } from '~/Utils/fetch';
import { useToast } from '~/Components/UIControls/Message';
import Form from '~/Components/Form';
import BottomTabBarLayout from '~/Components/Layouts/BottomTabBarLayout';
import { useAuth } from '~/Components/Hooks';
import { UploadFileType } from '~/Components/UIControls/UploadFile';

const titleWidth = 120;

const Screen = ({navigation}) => {
    const action = navigation.getParam('action', Form.VIEW);
    const siteId = navigation.getParam('siteId', '');
    const { auth, userinfo } = useAuth(navigation);

    const [loading, setLoading] = useState(false);
    const [editable, setEditable] = useState(action == Form.VIEW ? false : true);
    const [data, setData] = useState({});
    const { showMessage } = useToast();

    useEffect(() => {
        fetch();
    }, []);
    
    // search
    const fetch = async () => {
        setLoading(true);

        if(action != Form.CREATE) {
            try {
                const result = await fetchGet(`api/Site/${siteId}`);
                setData(result);
            } catch(error) {
                showMessage(error.message);
            }
        }

        setLoading(false);
    }

    return ( 
        <BottomTabBarLayout>
            <Form.Container loading={loading}>
                <Form.Field>
                    <Form.TitleTop style={{width:titleWidth}}><Form.Label>사진</Form.Label></Form.TitleTop>
                    <Form.UploadFile type={UploadFileType.Image} editable={editable} defaultFile={data.ImageFile} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>사옥명</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.Name} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.TitleTop style={{width:titleWidth}}><Form.Label>우편번호</Form.Label></Form.TitleTop>
                    <Form.Input defaultValue={data.AddressZip1} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.TitleTop style={{width:titleWidth}}><Form.Label>회사주소</Form.Label></Form.TitleTop>
                    <Form.Group>
                        <Form.Input defaultValue={data.Address1} editable={editable} style={{marginBottom:5}} />
                        <Form.Input defaultValue={data.Address2} editable={editable} style={{marginBottom:5}} />
                    </Form.Group>
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>준공연도</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.CompletionDate} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>건축규모</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.BuildingSize} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>연락처</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.PhoneNo} editable={editable} />
                </Form.Field>
                
                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>홈페이지</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.Url} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>주용도</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.MainUse} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>설계/감리</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.DesignSupervision} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>시공사명</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.ConstructionCompany} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>공사기간</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.ConstructionPeriod} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>구조</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.Structure} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>대지면적</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.LandArea} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>건축면적</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.BuildingArea} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>연면적</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.GrossArea} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>조경면적</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.LandscapingArea} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>건물층수</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.BuildingFloors} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>건고</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.BuildingHeight} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>용적율</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.FloorAreaRatio} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>건폐율</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.BuildingCoverageRatio} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>전용율</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.ConversionRate} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>로비바닥</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.LobbyFloor} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>사무실바닥</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.OfficeFloor} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>화장실바닥</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.ToiletFloor} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>E/V홀</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.EVHall} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>주차장</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.ParkingLot} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>외벽</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.OuterWall} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>주차장시설</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.ParkingFacilities} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>강당시설</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.AuditoriumFacilities} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>사용여부</Form.Label></Form.Title>
                    <Form.Switch initialValue={data.IsUse} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>날씨API 지역</Form.Label></Form.Title>
                    <Form.Input defaultValue={`${data.ApiSido} ${data.ApiSigun}`} editable={editable} />
                </Form.Field>

                <Form.Field>
                    <Form.Title style={{width:titleWidth}}><Form.Label>비고</Form.Label></Form.Title>
                    <Form.Input defaultValue={data.Comment} editable={editable} />
                </Form.Field>

                <Form.Field style={{ height:30 }}>
                </Form.Field>

            </Form.Container>
        </BottomTabBarLayout>
    );
};

Screen.navigationOptions = ({navigation}) => { 
    const action = navigation.getParam('action', Form.VIEW);    // create, edit, view

    return { 
        header: () => (
            <Header 
                navigation={navigation} 
                title={`건물개요`}
                main={false}
            /> 
        )
    } 
};

export default Screen;