import tw from 'twin.macro'
import { FormWrapper, ThirdWrapper } from 'src/components/teacher/FormGrid'
import { Wrapper } from 'src/components/shared/Wrapper.styled'
import { Input, Select, SelectOption, SelectOptions } from 'src/components/shared/Form'
import { UploadImage } from 'src/components/shared/UploadImage'
import ProfileAvatar from 'src/components/shared/ProfileAvatar'
import { useTheme } from 'src/utils/shared/globalStyles'
import { FullWrapper } from 'src/components/teacher/FormGrid'
import { BlueButton } from 'src/components/signin/Button'
import { ReactComponent as Icon } from 'src/assets/svg/copy-clipboard.svg'
import { ReactComponent as Exit } from 'src/assets/svg/exit.svg'
import EditImg from 'src/components/shared/EditImg'

export default function Profile() {
  const theme = useTheme()
  return (
    <div className='parent-container'>
      <div className='flex flex-start items-center mt-20 ml-20 gap-5'>
        <ImageWrapper>
          <ProfileAvatar w={10} name={'Timothy Fee'} theme={theme} type='student' border={tw`border-none`} />
        </ImageWrapper>
        <FullWrapper>
          <h3 className='font-bold'>Teacher Name</h3>
          <p>Acellus Gold Academy</p>
          <ExitIcon />
        </FullWrapper>
      </div>
      <ProfileWrapper id='main wrapper'>
        <ProfileCard>
          <FullWrapper>
            <h3 className='font-bold'>Profile</h3>
            <p>This information will be displayed and used within your school.</p>
          </FullWrapper>

          <ImageAndForm>
            <ImageWrapper>
              <ProfileAvatar w={10} name={'Timothy Fee'} theme={theme} type='teacher' border={tw`border-none`} />

              {/* <ProfileAvatar
                      name={getFullName(student)}
                      type='teacher'
                      w={14}
                      theme={theme}
                      url={imgData || profileImg}
                      userID={!profileImg && student.acellusID}
                      border={tw`border-none`}
                    />
                    <EditImg task={uploadImage} close={close} theme={theme} buttonColor='teacherBlue' buttonColorNum={500} /> */}

              {/* <EditImg theme={theme} buttonColor={'blue'} buttonColorNum={500} popoverColor={'blue'} popoverColorNum={500} editProfile={true} /> */}
              
            </ImageWrapper>

            <StyledFormWrapper id='FormWrapper'>
              <StyleThirdWrapper>
                <Select className='font-bold' labelText='Salutation'>
                  <SelectOptions>
                    <SelectOption value='Mr.'>Mr.</SelectOption>
                    <SelectOption value='Mrs.'>Mrs.</SelectOption>
                    <SelectOption value='Dr.'>Dr.</SelectOption>
                  </SelectOptions>
                </Select>
                <Input labelText='phone'></Input>
              </StyleThirdWrapper>

              <StyleThirdWrapper>
                <Input labelText='First Name'></Input>
                <Input labelText='Email' value='Alexandra@gmail.com' disabled></Input>
              </StyleThirdWrapper>

              <StyleThirdWrapper>
                <Input labelText='Last Name'></Input>
                <Input labelText='Administration Level' value='Teacher' disabled></Input>
              </StyleThirdWrapper>
            </StyledFormWrapper>
          </ImageAndForm>
          <StyledFormWrapper>
            <FullWrapper>
              <h3>Account</h3>
              <p>This is your Acellus account information.</p>
            </FullWrapper>

            <ThirdWrapper>
              <Input labelText='Acellus ID' value='567-270-1001' disabled>
                <ClipboardIcon />
              </Input>
            </ThirdWrapper>

            <ThirdWrapper>
              <Input labelText='School ID' value='10005531' disabled>
                <ClipboardIcon />
              </Input>
            </ThirdWrapper>

            <ThirdWrapper>
              <Input labelText='School Name' value='Acellus' disabled>
                <ClipboardIcon />
              </Input>
            </ThirdWrapper>
          </StyledFormWrapper>

          <StyledFormFooter>
            <StyledBlueButton color='teacherBlue' type='submit'>
              Save
            </StyledBlueButton>
          </StyledFormFooter>
        </ProfileCard>
      </ProfileWrapper>
    </div>
  )
}

const ProfileWrapper = tw(Wrapper)`flex flex-col justify-center py-20 `
const ProfileCard = tw.div`flex flex-col bg-white rounded-2xl p-10 px-16`
const ClipboardIcon = tw(Icon)`absolute [height: 50%] right-4 bottom-4 text-current stroke-stone-400 `
const ExitIcon = tw(Exit)`absolute  h-10 top-20 right-5 mr-20 stroke-blue-600`
const ImageAndForm = tw.div`flex flex-col gap-10 items-center xl:flex-row`
const StyledBlueButton = tw(BlueButton)`w-36 m-0`
const StyledFormWrapper = tw(FormWrapper)`max-w-full `
const ImageWrapper = tw.div`block flex-col col-span-12 mt-10 lg:(flex col-span-12 row-span-2)  xl:mt-0 `
const StyledFormFooter = tw.div`py-6 flex flex-row justify-end items-end `
const StyleThirdWrapper = tw(ThirdWrapper)`flex flex-col gap-7 `
const UploadButton = tw.button`bg-blue-400 hover:scale-105 text-white text-sm py-2 px-4 rounded transition-transform ease-in-out`
// const RedBox = tw.div`bg-red-900 h-96 w-full`
// const padding = `10px `
// const parent-container=" display:Flex align-items: center`
 

​​